React-router-dom：嵌套路由不起作用，而是从根组件应用程序中路由

Posted 2023-02-22

【中文标题】React-router-dom：嵌套路由不起作用，而是从根组件应用程序中路由

【英文标题】：React-router-dom: Nested routes is not working but routes instead from within the root component App

【发布时间】：2020-06-02 06:04:28

【问题描述】：

我正在关注这个tutorial 来实现嵌套路由。 以下是相关代码：

App.js

   <PrivateRoute
                exact
                name="Home"
                path="/home"
                component=DefaultLayout
              />  

DefaultLayout.js

const Users = React.lazy(() => import("../../views/Users/Users"));

          <Route path="/home/users" component=Users />

PrivateRoute.js

import React from "react";
import  Route, Redirect  from "react-router-dom";
import  connect  from "react-redux";
import PropTypes from "prop-types";
const PrivateRoute = ( component: Component, auth, ...rest ) => (
  <Route
    ...rest
    render=props =>
      auth.isAuthenticated === true ? (
        <Component ...props />
      ) : (
        <Redirect to="/" />
      )
    
  />
);

PrivateRoute.propTypes = 
  auth: PropTypes.object.isRequired
;

const mapStateToProps = state => (
  auth: state.auth
);

export default connect(mapStateToProps)(PrivateRoute);

您可能已经猜到了，我正在使用 PrivateRoute 组件保护 /home 路由。/home 路由与 DefaultLayout 组件相关联。DefaultLayout 组件包含一个 NestedRoute，即 /home/users，它通向组件 Users。

私有路由功能正常，用户登录后路由到默认布局： 但是，当我单击一个将我路由到 /home/users 的按钮时，我得到了这个空白屏幕： 知道我做错了什么吗？编辑 1：当我将它添加到 App.js 时：

   const Users = React.lazy(() => import("../../views/Users/Users"));

              <Route path="/home/users" component=Users />

我确实被路由到 Users 组件。但是，不是作为嵌套路由，而是作为根路由中的一个组件。换言之，Users 组件不会出现 在 defaultLayout 组件内，而是显示为 根组件。我希望这是有道理的。这是截图：

EDIT 1 结论： 嵌套路由 实现不起作用。该应用程序仍然从 App.js 内部路由，而不是从 DefaultLayout.js 内部路由。编辑 2： 我意识到即使没有 PrivateRoute 组件和使用普通的 Route 组件，嵌套路由仍然不起作用：

      <Route exact path="/home" name="Home" component=DefaultLayout />

【参考方案1】：

看来您需要从您的 Home Route 中删除 exact 属性：

<Route path="/home" name="Home" component=DefaultLayout />

使用exact，您的DefaultLayout 组件只会在url 完全 /home 时呈现。由于/home/users 不等于/home，当您导航到/home/users 时，您的DefaultLayout 组件和嵌套的Users 路由都不会被渲染。

以下是描述 exact 属性的文档：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md#exact-bool

【讨论】：

嘿，即使我删除了确切的内容，当我输入 /home/users 时仍然会出现空白屏幕

问题是 react-router-dom 从 App.js 内部路由，而不是把路由交给 DefaultLayout 组件

嗯，看看你的DefaultLayout组件代码可能会有所帮助

嘿，马特，实际上这解决了我的问题，谢谢