在单独的组件中定义路由 - React答案

【问题标题】：Defining Routes in Separate Component - React在单独的组件中定义路由 - React
【发布时间】：2019-02-23 05:52:22
【问题描述】：

我是新手，目前正在学习。我遇到了 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

【问题讨论】：

标签： reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

您在 Dashboard 的路径上有一个 exact={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 也有嵌套的子节点，最好配置您的路由，例如

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;

【讨论】：