React-Router的中文文檔可以參照如下鏈接： http://react-guide.github.io/react-router-cn/docs/Introduction.html
- 我們刪去src目錄下的所有文件，創(chuàng)建index.js文件锐想，內(nèi)容如下：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App/>, document.getElementById('root'));
創(chuàng)建App.js
import React from 'react';
import {BrowserRouter as Router,Route} from 'react-router-dom';
import Login from './login'
import Home from './page/Home';
import Page1 from './page/page1';
import Page2 from './page/page2';
class App extends React.Component{
constructor(props){
super(props);
this.state={
}
}
handle=()=>{
console.log('什么毛病')
}
render(){
return (
<Router>
<div>
<button onClick={this.handle}></button>
<Route path='/Login' component={Login}/>
<Route path='/' component={Home} />
<Route path='/Page1' component={Page1}/>
<Route path='/Page2' component={Page2}/>
</div>
</Router>
)
}
};
export default App;
下面來(lái)分析一下膀藐，在上方的import中，載入了 BrowserRouter as Router 和 Route爪飘，其意思就是從react-router-dom
包中導(dǎo)入Router和Route未辆，BrowserRouter是Router中的一種睛琳。
然后，下面依次引入了Home鬼店、Page1网棍、Page2、Page3這四個(gè)組件妇智，組件的內(nèi)容之后會(huì)給出滥玷。
在組件的render函數(shù)的return里面，我們可以看到一對(duì)<Router>標(biāo)簽包含了四個(gè)<Route>標(biāo)簽巍棱，每個(gè)<Route>標(biāo)簽中都包含了path屬性和component屬性惑畴，path 屬性用于儲(chǔ)存路徑，就是網(wǎng)站主頁(yè)路徑后面的內(nèi)容航徙，假如網(wǎng)站地址是localhost:3000如贷，那么，locahost:3000后面的字符串就是path屬性的內(nèi)容。（注意杠袱，Router只能有一個(gè)子組件尚猿，所以要把所有Route標(biāo)簽用一個(gè)div包裹起來(lái)）
然后是 component 屬性，其中儲(chǔ)存了組件名稱楣富，當(dāng)我們?cè)L問特定地址時(shí)就會(huì)渲染該組件凿掂，也可以稱其為這一個(gè)路由的入口組件，可以由這個(gè)組件延伸開來(lái)搭建頁(yè)面菩彬。
Home組件的內(nèi)容如下（Home.js）：
import React from 'react';
class Home extends React.Component{
render(){
return(
<div>
<div>This is Home!</div>
</div>
);
}
}
export default Home;
用于顯示div標(biāo)簽中的This is Home缠劝！語(yǔ)句潮梯。
Page1-Page3組件類似骗灶，內(nèi)容為：
import React from 'react';
class Page1 extends React.Component{
render(){
return(
<div>
<div>This is Page1!</div>
</div>
);
}
}
export default Page1;
