react路由嵌套

react路由嵌套在config.js中添加配置项importTwofrom”../pages/Home/Two”importRecommendfrom”../pages/Recommend/Recemmend”;//导入组件letrouters=[{path:”/home”,//路由地址component:Home,//路由模板routes:[//路由嵌套配置路由嵌套不能使用精准匹配

在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>
        );
    }

今天的文章react路由嵌套分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/6028.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注