React路由的使用和页面的跳转

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;