react路由嵌套

全栈程序员-站长 • 2022年4月29日下午8:20 • 未分类 • 阅读 40

大家好，又见面了，我是你们的朋友全栈君。

在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