大家好，又见面了，我是你们的朋友全栈君。
在config.js 中添加配置项
import Two from "../pages/Home/Two"
import Recommend from "../pages/Recommend/Recemmend"; //导入组件
let routers = [
{
path: "/home", //路由地址
component: Home, //路由模板
routes: [ //路由嵌套 配置路由嵌套不能使用精准匹配
{
path: "/home/recommend",
component: Recommend,
exact: true, //精准匹配
},
{
path: "/home/ranking",
component: System,
exact: true,
},
{
path: "/home/two",
component: Two,
exact: true,
},
]
},
{
path: "/about",
component: About,
exact: true
},
{
path: "/",
redirect: "/home", //重定向
}
]
export default routers;
将配置文件导入到路由组件 index.js
import React, { Component } from 'react';
import { Switch, Route, Redirect } from "react-router-dom";
import routers from "./config"; //配置文件
class Router extends Component {
render() {
return (
<Switch>
{routers.map((value, index) => { //映射注入Route组件中
if (!value.redirect) { //需要重定型执行写下面代码
return (
<Route key={index} exact={value.exact} path={value.path} component={props => <value.component {...props} routes={value.routes} />} ></Route>
//如果有路由嵌套，则将路由签到传递到组件的props中，在传递的组件中再次进行路由配置
)
} else {
return (
<Redirect key={index} from={value.path} to={value.redirect}></Redirect>
//重定向
)
}
})}
</Switch>
);
}
}
export default Router; 将文件导注入到app.js中
app.js
import './App.css';
import React, { Component } from 'react';
import RouterView from './router/index';
class App extends Component {
render() {
return (
<div>
//将组件使用在app.js中
<RouterView></RouterView>
</div>
);
}
}
export default App;
在路由嵌套的Home页面中再次配置路由组件;
render() {
console.log(this.props.routes) //路由嵌套的配置规则
return (
<div className="Home-box">
<Switch>
//再次添加路由组件实现路由嵌套
{this.props.routes.map((value, index) => <Route key={index} path={value.path} exact={value.exact} component={value.component}></Route>)}
</Switch>
</div>
);
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/131483.html原文链接：https://javaforall.net
