react路由

先下载路由

npm install react-router-dom --save-dev

然后新建两个页面

component1.js

import React from 'react';

class Component1 extends React.Component{
    render(){
        return (
            <div>
                <a href="#/component2">去component2</a>
            </div>
        );
    }
}

export default Component1

component2.js

import React from 'react';

class Component2 extends React.Component{
    render(){
        return (
            <div>
                <a href="/">回到component1</a>
            </div>
        );
    }
}

export default Component2

注意：React.Component的Component中C一定要大写

然后新建Routers.js

import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Component1 from '../view/Component1';
import Component2 from '../view/Component2';

const BasicRoute = () =>(
    <HashRouter>
        <Switch>
            <Route exact path='/' component={Component1}/>
            <Route exact path='/component2' component={Component2}/>
        </Switch>
    </HashRouter>
)

export default BasicRoute;

在index.js中编写如下：

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router/Routers'

ReactDOM.render(<Router />, document.getElementById('root'));

这样完成了一个简单的路由跳转

路由的exact属性

具体区别如下：

<Route path='/' component={Home} />
<Route path='/page' component={Page}>
//这种情况下，如果匹配路由path='/page'，那么会把Home也会展示出来。
//既路由path='/page'会匹配路由path='/'和路由path='/page'

<Route exact path='/' component={Home} />
<Route path='/page' component={Page} />
//这样匹配路由path='/page'，只会匹配到Page组件