React-Router的中文文档可以参照如下链接： http://react-guide.github.io/react-router-cn/docs/Introduction.html
- 我们删去src目录下的所有文件，创建index.js文件，内容如下：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App/>, document.getElementById('root'));
创建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;
下面来分析一下，在上方的import中，载入了 BrowserRouter as Router 和 Route，其意思就是从react-router-dom
包中导入Router和Route，BrowserRouter是Router中的一种。
然后，下面依次引入了Home、Page1、Page2、Page3这四个组件，组件的内容之后会给出。
在组件的render函数的return里面，我们可以看到一对<Router>标签包含了四个<Route>标签，每个<Route>标签中都包含了path属性和component属性，path 属性用于储存路径，就是网站主页路径后面的内容，假如网站地址是localhost:3000，那么，locahost:3000后面的字符串就是path属性的内容。（注意，Router只能有一个子组件，所以要把所有Route标签用一个div包裹起来）
然后是 component 属性，其中储存了组件名称，当我们访问特定地址时就会渲染该组件，也可以称其为这一个路由的入口组件，可以由这个组件延伸开来搭建页面。
Home组件的内容如下（Home.js）：
import React from 'react';
class Home extends React.Component{
render(){
return(
<div>
<div>This is Home!</div>
</div>
);
}
}
export default Home;
用于显示div标签中的This is Home！语句。
Page1-Page3组件类似，内容为：
import React from 'react';
class Page1 extends React.Component{
render(){
return(
<div>
<div>This is Page1!</div>
</div>
);
}
}
export default Page1;
