大家好,又见面了,我是你们的朋友全栈君。
在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>
);
}
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/131483.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...