У меня есть два разных макета для внешнего интерфейса и админ-панели. Компоненты для админ-панели отображали корректность в макете администратора, но для внешнего интерфейса он не переключает маршруты правильно и не отображается в макете внешнего интерфейса.Когда я не использую точное свойство в 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;