react项目—路由和嵌套子路由（react-router4.0）

前言：在做项目的时候，花费了几天的时间才把路由问题解决，但是对react的几种路由的区分和使用，我现在也是整的还不清楚。

1、安装相关的包：

（1）npm install --save-dev react-router

（2）npm install --save-dev react-router-dom

（3）npm install --save react-router-config

在package.json中查看版本

         

2、配置路由

（1）新建路由文件 route.js

          

代码如下所示：

import React from 'react'; import FyOfficalHomePage from './components/FyOfficalHomePage/FyOfficalHomePage'; import FyAdvantage from './components/FyAdvantage/FyAdvantage'; import FyAdvantageOne from './components/FyAdvantage/FyAdvantageOne/FyAdvantageOne'; import FyAdvantageTwo from './components/FyAdvantage/FyAdvantageTwo/FyAdvantageTwo'; import FyAdvantageThree from './components/FyAdvantage/FyAdvantageThree/FyAdvantageThree'; import FyCommonProblem from './components/FyCommonProblem/FyCommonProblem'; import FyCompanyPosition from './components/FyCompanyPosition/FyCompanyPosition'; const routes = [ { path: '/', component: FyOfficalHomePage, exact: true, }, { path: '/advantage', component: FyAdvantage, children: [ { path: '/advantage/advantage1', component: FyAdvantageOne }, { path: '/advantage/advantage2', component: FyAdvantageTwo }, { path: '/advantage/advantage3', component: FyAdvantageThree } ] }, { path: '/faq', component: FyCommonProblem }, { path: '/map', component: FyCompanyPosition }, ]; export {routes}

注：（1）exact:

                是Route下的一条属性，一般而言，react路由会匹配所有匹配到的路由组价，exact能够使得路由的匹配更严格一些。

                值为bool型，为true是表示严格匹配，为false时为正常匹配。

                如在exact为true时，’/link’与’/’是不匹配的，但是在false的情况下它们又是匹配的。

       （2）嵌套子路由children，这里说明一下不一定必须用children，你可以用其它的词代替。但是我个人觉得，children辨识度                  高，在后面使用的时候也不会搞混。

（2）index.js文件

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import registerServiceWorker from './registerServiceWorker'; import { routes } from './routes'; import { BrowserRouter } from 'react-router-dom'; import { renderRoutes } from 'react-router-config'; ReactDOM.render( (<BrowserRouter> {renderRoutes(routes)} </BrowserRouter>), document.getElementById('root') ); registerServiceWorker();

（3）组件中使用

import React from 'react'; import { Link } from 'react-router-dom'; export default class NavigationBar extends React.Component { constructor(props) { super(props); this.state = {} } render (){ return( <div> <ul> <li> <Link to="/">首页</Link> </li> <li> <Link to="/advantage">advantage</Link> </li> </ul> </div> ) } }

子路由（子页面）：

import React from 'react'; import { Link } from 'react-router-dom'; import { renderRoutes } from 'react-router-config' export default class FyAdvantage extends React.Component { constructor(props) { super(props); this.state = { route: props.route, } } render (){ const route = this.state.route; return( <div> {renderRoutes(route.children)} <div> <ul> <li> <Link to="/advantage/advantage1">advantage1</Link> </li> <li> <Link to="/advantage/advantage2">advantage2</Link> </li> <li> <Link to="/advantage/advantage3">advantage3</Link> </li> </ul> </div> </div> ) } }

注：（1）接受通过props传过来的route

       （2）{renderRoutes(route.children)}是子页面的入口，子页面是在原来的页面的基础加载的，

                例：A是父页面，B和C是A的子页面。B、C是A的一部分，在加载B或C页面的时候，父页面A的内容依然存在，B或C                       的页面内容通过入口渲染在A页面中。