为什么组件没有在使用反应路由的反应 JS 中呈现在父布局中？

Question

我有两种不同的前端和管理面板布局。管理面板的组件在管理布局中呈现正确，但对于前端，它不能正确切换路由，也不会在前端布局中呈现。 当我不使用 index.js 中的确切属性时，它甚至也不适用于管理面板路由。 我也咨询过这个链接 Nested Routes not rendering with React Router v4 但它对我不起作用。

import Dashboard from "layouts/Dashboard/Dashboard.jsx";
import Login from "components/FrontEnd/Login";
import Frontend from  "layouts/Frontend/Frontend.jsx";
import AdminLogin from  "layouts/Dashboard/AdminAuth.jsx";


var indexRoutes = [

    { path: "/", name: "Frontend", component: Frontend , exactPro:true},
    { path: "/login", name: "FrontendLogin", component: Login , exactPro:false},
    { path: "/Admin", name: "Home", component: Dashboard, exactPro:false },
    { path: "/Admin-login", name: "AdminLogin", component: AdminLogin, exactPro:false}

];

export default indexRoutes;

索引.js

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, Switch } from 'react-router-dom'
import indexRoutes from "routes/index.jsx";
import { history } from './helper/history';
import store from "./redux/store/index";
import { Provider } from "react-redux";

ReactDOM.render(
    <Provider store={store}>
        <Router history={history} >
            <Switch>
              {indexRoutes.map((prop, key) => {
                return <Route exact={prop.exactPro}  path={prop.path} component={prop.component} key={key} />;
              })}
            </Switch>
        </Router>
    </Provider>,
  document.getElementById("root")
);

.......

import Dashboard from "components/Admin/Dashboard";
import UserProfile from "views/UserProfile/UserProfile";

const dashboardRoutes = [
  {
    path: "/Admin/dashboard",
    name: "Dashboard",
    icon: "pe-7s-graph",
    component: Dashboard,
    showMenu:true,
    showMenuFront:false,
    iconImagePath:dashboardIcon,
    permission:'both'
  },
  {
    path: "/Admin/user",
    name: "User Profile",
    icon: "pe-7s-user",
    component: UserProfile,
    showMenu:false,
    showMenuFront:false,
    permission:'both'
  },
  { redirect: true, path: "/Admin", to: "/Admin/dashboard", name: "Dashboard" }
];

export default dashboardRoutes;

…………

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

export const AdminAuthRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={(props, matchProps) => (
        localStorage.getItem('admin-user') 
        ? <Component {...props} {...matchProps} /> 
        : <Redirect to={{ pathname: '/Admin-login', state: { from: props.location } }} />
    )} />
)

.......

import React, { Component } from "react";
import {  Switch, Redirect } from "react-router-dom";
import dashboardRoutes from "routes/dashboard.jsx";
import {  AdminAuthRoute } from 'helper/PrivateRouteAdmin';

class DashboardPage extends Component {
  constructor(props) {
    super(props);
  }


  render() {

    return (
      <div className="wrapper">
        <div id="main-panel" className="main-panel" ref="mainPanel">
          <Switch>
            {
              dashboardRoutes.map((prop, key) => {
                console.log("prop redirect", prop.redirect);
                if (prop.redirect){
                  return <Redirect from={prop.path} to={prop.to} key={key} test="haha" />;
                }
                console.log('prop.path 111', prop.path);
                return (
                  <AdminAuthRoute   path={prop.path}  component={prop.component} key={key}  />
                );
              })
            }
          </Switch>
          <Footer />
        </div>
      </div>
    );
  }
}


export default Dashboard;

......

 import Home from "components/FrontEnd/Home";
    import HowItWorks from "components/FrontEnd/HowItWorks";
    import AboutUs from "components/FrontEnd/AboutUs";

    const FrontEndRoutes = [
      {
        path          : "/",
        name          : "Home",
        component     : Home,
        showMenu      : true,
        number        : 1
      },
      {
        path          : "/How_It_Works",
        name          : "How it works",
        component     : HowItWorks,
        showMenu      : true,
        number        : 2
      },
      {
        path          : "/About_Us",
        name          : "About Us",
        component     : AboutUs,
        showMenu      : true,
        number        : 3
      }
    ];

    export default FrontEndRoutes;

...........

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

export const FrontEndAuthRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={(props, matchProps) => (
        localStorage.getItem('music-director') 
        ? <Component {...props} {...matchProps} /> 
        : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
    )} />
)

.......

import React, { Component } from "react";
import {  Switch, Redirect } from "react-router-dom";
import FrontEndRoutes from "routes/FrontEndRoutes.jsx";
import {  FrontEndAuthRoute } from 'helper/PrivateRouteFrontEnd';

class Frontend extends Component {
  constructor(props) {
    super(props);
  }
  render() {

    return (
      <div className="wrapper">
        <div id="main-panel" className="main-panel" ref="mainPanel">
          <Switch>
            {
              FrontEndRoutes.map((prop, key) => {
                if (prop.redirect){
                    return <Redirect from={prop.path} to={prop.to} key={key} test="haha" />;
                }
                return (
                    <FrontEndAuthRoute   path={prop.path}  component={prop.component} key={key}  />
                );

              })
            }
          </Switch>
        </div>
      </div>
    );
  }
}
export default Frontend;

Answer 1

在编写嵌套路由时需要注意很多事情

1. 当您有嵌套路由时，您需要确保父路由没有确切的关键字。例如，path = '/' 和子路由 /home 的路由不会在 /home 上呈现 Home 组件，因为顶层本身不会匹配。
2. 您需要确保在 Switch 组件中编写路由时，前缀路由路径位于开头。

考虑到以上几点，您的应用需要进行以下更改

import Dashboard from "layouts/Dashboard/Dashboard.jsx";
import Login from "components/FrontEnd/Login";
import Frontend from  "layouts/Frontend/Frontend.jsx";
import AdminLogin from  "layouts/Dashboard/AdminAuth.jsx";


var indexRoutes = [

    { path: "/Admin-login", name: "AdminLogin", component: AdminLogin, exactPro:false}
    { path: "/login", name: "FrontendLogin", component: Login , exactPro:false},
    { path: "/Admin", name: "Home", component: Dashboard, exactPro:false },
    { path: "/", name: "Frontend", component: Frontend , exactPro:false},

];

export default indexRoutes;

---

import Home from "components/FrontEnd/Home";
import HowItWorks from "components/FrontEnd/HowItWorks";
import AboutUs from "components/FrontEnd/AboutUs";

const FrontEndRoutes = [
  {
    path          : "/How_It_Works",
    name          : "How it works",
    component     : HowItWorks,
    showMenu      : true
  },
  {
    path          : "/About_Us",
    name          : "About Us",
    component     : AboutUs,
    showMenu      : true
  },
  {
    path          : "/",
    name          : "Home",
    component     : Home,
    showMenu      : true
  },
];

export default FrontEndRoutes;