react路由

先下載路由

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

而後新建兩個頁面

component1.js

 1 import React from 'react';
 2 
 3 class Component1 extends React.Component{
 4     render(){
 5         return (
 6             <div>
 7                 <a href="#/component2">去component2</a>
 8             </div>
 9         );
10     }
11 }
12 
13 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

 1 import React from 'react';
 2 import {HashRouter, Route, Switch} from 'react-router-dom';
 3 import Component1 from '../view/Component1';
 4 import Component2 from '../view/Component2';
 5 
 6 const BasicRoute = () =>(
 7     <HashRouter>
 8         <Switch>
 9             <Route exact path='/' component={Component1}/>
10             <Route exact path='/component2' component={Component2}/>
11         </Switch>
12     </HashRouter>
13 )
14 
15 export default BasicRoute;

在index.js中編寫以下：

1 import React from 'react';
2 import ReactDOM from 'react-dom';
3 import Router from './router/Routers'
4 
5 ReactDOM.render(<Router />, document.getElementById('root'));

這樣完成了一個簡單的路由跳轉

路由的exact屬性

具體區別以下：

1 <Route path='/' component={Home} />
2 <Route path='/page' component={Page}>
3 //這種狀況下，若是匹配路由path='/page'，那麼會把Home也會展現出來。
4 //既路由path='/page'會匹配路由path='/'和路由path='/page'

1 <Route exact path='/' component={Home} />
2 <Route path='/page' component={Page} />
3 //這樣匹配路由path='/page'，只會匹配到Page組件