1

我正在按照本教程来实现嵌套路由。
以下是相关代码：

应用程序.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组件不会出现在defaultLayout组件中，而是作为根组件出现。我希望这是有道理的。这是一个屏幕截图：
在此处输入图像描述

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

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

1 回答 1

0

看起来您需要exact从以下内容中删除道具Home Route：

<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

于 2020-02-18T11:56:51.490 回答