为什么组件不在使用react路由的react JS中的父布局中呈现

Question

我有两种不同的前端和管理面板布局。管理面板的组件在管理布局中呈现正确，但对于前端，它没有正确切换路由，也没有在前端布局中呈现。当我在index.js中不使用确切的属性时，它甚至不适用于管理面板路由。我也查阅了这个链接嵌套路由未使用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;

Index.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

在编写嵌套Routes 时，需要处理多个问题

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

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

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;