前言:在做项目的时候,花费了几天的时间才把路由问题解决,但是对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页面中。