1、react-router和React-router-dom的选择
在初始使用react-router的时候，让我们很纠结，不知道react-router和react-router-dom之间的有何差别，下面我就简单的介绍下：
（1）React-router
React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供dom操作进行跳转的api。
（2）React-router-dom
React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-router-dom。安装很简单npm i react-router-dom --save,安装了淘宝镜像的就用cnpm吧。
2、配置路由
（1）安装依赖
1）安装react-router4
npm i react-router-dom --save
2）安装 React Router Config, 配置路由表必须
npm install --save react-router-config
如果你的网速不是很好的好，可以使用淘宝镜像cnpm安装，但是使用cnpm安装可能会导致模块安装不全的问题，不过这关系也不是很大，如果某个模块没有安装的话，可以直接安装该模块。
打开package.json文件，有我用红笔圈起来的两个，则说明依赖安装成功。
（2）配置路由表
1）在src文件下，新建路由文件 routes.js
2）引入react和组件
import Reac tfrom 'react';
import FyOfficalHomePage from './components/FyOfficalHomePage/FyOfficalHomePage';
import FyAdvantage from './components/FyAdvantage/FyAdvantage';
3）定义路由
const routes = [
{
path: '/',
component: FyOfficalHomePage,
exact: true
}, {
path: '/advantage',
component: FyAdvantage ,
},
]
4）导出
export {routes}
routes.js基本内容截图如下图所示：
（3）使用
1）入口文件index.js
引入你的路由文件routes.js，以及依赖react-router-dom和react-router-config
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') );
截图：
2）
在你需要使用路由的页面引入Link组件：
import { Link } from 'react-router-dom';
<li>
<Link to="/advantage">
<p style={{padding:'40px 16px 20px', fontSize:'16px'}}>张三</p>
<p style={{padding:'0 16px', fontSize:'30px'}}>{item.content}</p>
</Link>
</li>
如此，基本路由就完成了。
（4）番外
1）exact
exact是Route下的一条属性，一般而言，react路由会匹配所有匹配到的路由组价，exact能够使得路由的匹配更严格一些。
exact的值为bool型，为true是表示严格匹配，为false时为正常匹配。
如在exact为true时，’/advantage’与’/’是不匹配的，但是在false的情况下它们又是匹配的。
3、子路由
子页面是父页面的一部分，就是说子页面是在你父页面的基础上渲染的（在渲染子页面的时候，会直接在父页面上渲染，父页面的内容依然存在，所以我们在写子页面的时候，只需要写变动的那部分）。
（1）路由文件routes.js
1）引入组件
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';
FyAdvantageOne ，FyAdvantageTwo ，FyAdvantageThree 是FyAdvantage 的子路由。
2）路由
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
}
]
}
]
注：里面的children是我自己命的名
3）组件
在你的父组件中引入Link组件和renderRoutes依赖
import { Link } from 'react-router-dom';
import { renderRoutes } from 'react-router-config'
我们需要得到传递过来的route，方式如下：
在你需要的位置将下面语句添加上去，如果不添加的话，子页面会渲染不上（就是说，这是子页面的入口）
{renderRoutes(this.state.route.children)}
OK！关于react的路由配置完成！加油 \0oo0/
网友评论