React中react-router-dom包實現路由

來自專欄前端組隊小夥伴

1,下載react-router-dom用npm install react-route-dom -D 或cnpm install react-route-dom

2,在src下的index文件中引入import {HashRouter,Route} from react-route-dom

3,在index.js需要引入的文件有

import React from react

import ReactDOM from react-dom

4，在相應的組件中應用路由代碼如下：

import React from react

import ReactDOM from react-dom

import {HashRouter,Route} from react-router-dom

class App extends React.Component{

render(){

return(<div>

<Header/>

<Main/>

</div>)

}

}

class Home extends React.Component{

render(){

return (<div>

<h3>我是主頁組件</h3>

</div>)

}

}

class About extends React.Component{

render(){

return (<div>

<h3>我是關於組件</h3>

</div>)

}

}

class Header extends React.Component{

render(){

return (<div>

<ul>

<li>

<a href=#/home>主頁</a>

</li>

<li>

<a href=#about>關於</a>

</li>

</ul>

</div>)

}

}

class Main extends React.Component{

render(){

return(<div>

<Route path=/hoem component={Home}></Route>

<Route path=/about component={About}></Route>

</div>)

}

}

ReactDOM.render(

<HashRouter>

<App/>

</HashRouter>,

document.getElementById(root)

)