我是新来的人,现在正在学习。我遇到了react-router的问题。
我在app.js中定义了以下路由
import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./Home";
import AdminLogin from "./Admin/Login/index";
import { PrivateRoute } from "../Shared/PrivateRoute";
import Dashboard from "./Admin/Dashboard";
export default class Routes extends Component {
render() {
return (
<Switch>
<Route path="/" exact={true} component={Home} />
<Route path="/auth/adminlogin" exact={true} component={AdminLogin} />
<PrivateRoute
path="/admin/dashboard"
exact={true}
component={Dashboard}
/>
</Switch>
);
}
}
我像下面一样使用上面的
import React, { Component } from "react";
import "./App.css";
import Navbar from "./Components/Navbar";
import Routes from "./Components/Pages/Routes";
import { AuthProvider } from "./Context/AuthContext";
const styles = {
noPadding: {
padding: "0"
}
};
class App extends Component {
render() {
return (
<AuthProvider>
<React.Fragment>
<Navbar />
<div className="container-fluid" style={styles.noPadding}>
<Routes />
</div>
</React.Fragment>
</AuthProvider>
);
}
}
export default App;
现在登录后,我进入“仪表板”页面,并在那儿定义了一些“仪表板”路线。以下是我的仪表板组件
import React, { Component } from "react";
import DashboardSidebar from "./DashboardSidebar";
import DashboardRoutes from "./DashboardRoutes";
class Dashboard extends Component {
state = {};
render() {
return (
<div>
<div className="row">
<div className="col-md-2">
<DashboardSidebar />
</div>
<div className="col-md-10">
<DashboardRoutes />
</div>
</div>
</div>
);
}
}
export default Dashboard;
以下是仪表板路线
import React, { Component } from "react";
import MyImages from "./MyImages/index";
import { Switch } from "react-router-dom";
import { PrivateRoute } from "../../../Shared/PrivateRoute";
import Orders from "./Orders";
import Reviews from "./Reviews/index";
class DashboardRoutes extends Component {
state = {};
render() {
return (
<div>
<Switch>
<PrivateRoute
path="/admin/dashboard"
exact={true}
component={MyImages}
/>
<PrivateRoute
path="/admin/dashboard/orders"
exact={true}
component={Orders}
/>
<PrivateRoute
path="/admin/dashboard/reviews"
exact={true}
component={Reviews}
/>
</Switch>
</div>
);
}
}
export default DashboardRoutes;
在上面的MyImages组件中可以很好地加载,而其他仪表板组件则不能。请提出问题所在,否则我们需要在同一位置定义所有路线以实现此目标。
TIA
答案 0 :(得分:1)
仪表板的路径上具有精确= {true},因此没有嵌套路径会正确匹配,您需要从具有嵌套路由的路由中删除精确属性,然后在Switch组件中重新销毁它们。
<PrivateRoute
path="/admin/dashboard"
component={Dashboard}
/>
整个解决方案
App.js
export default class Routes extends Component {
render() {
return (
<Switch>
<Route path="/" exact={true} component={Home} />
<Route path="/auth/adminlogin" exact={true} component={AdminLogin} />
<PrivateRoute
path="/admin/dashboard"
component={Dashboard}
/>
</Switch>
);
}
}
仪表板路线
class DashboardRoutes extends Component {
state = {};
render() {
return (
<div>
<Switch>
<PrivateRoute
path="/admin/dashboard"
exact={true}
component={MyImages}
/>
<PrivateRoute
path="/admin/dashboard/orders"
exact={true}
component={Orders}
/>
<PrivateRoute
path="/admin/dashboard/reviews"
exact={true}
component={Reviews}
/>
</Switch>
</div>
);
}
}
export default DashboardRoutes;
如果DashboardRoutes也有嵌套子级,最好像这样配置您的Routes
class DashboardRoutes extends Component {
state = {};
render() {
return (
<div>
<Switch>
<PrivateRoute
path="/admin/dashboard/orders"
component={Orders}
/>
<PrivateRoute
path="/admin/dashboard/reviews"
component={Reviews}
/>
<PrivateRoute
path="/admin/dashboard"
component={MyImages}
/>
</Switch>
</div>
);
}
}
export default DashboardRoutes;