React 路由器呈现一个空白页面

React router renders a blank page

我正在尝试学习 ReactJS,新的 React 路由器在嵌套路由方面确实让我感到困惑。

简单的我想要三个路由如下 / - home Page /users - list all the users /users/add - add user form

您可以在下面看到完整的代码示例

View code in codesandbox.io

当我点击 //users 时,它工作正常。但是,当我到达 /users/add 路由器呈现一个空白页面而不是 AddUser 组件。

我知道我可以像 /users/users/add 一样在 index.js 中定义绝对路由。但我有点想有一种更易于维护的方式来定义子组件内部的路由器。

知道如何解决这个问题吗?

// src/index.js 
render(
  <BrowserRouter>
    <div>
      <Route exact path="/" component={App} />
      <Route path="/about" component={About} />
      <Route exact path="/users" component={UserLayout} />
    </div>
  </BrowserRouter>,
  document.getElementById("root")
);



class UserLayout extends Component {
    constructor(props) {
      super(props);
    }

    render() {
      return (
        <div className="users">
          <Route exact path={this.props.match.path} component={Users} />
          <Route path={`${this.props.match.path}/add`} component={AddUser} />
        </div>
      );
    }
}

在您的 src/index.js 文件中 <Route exact path="/users" component={UserLayout} />

应该是

<Route path="/users" component={UserLayout} />

发生的事情是你的 exact 让它只匹配 /users 所以当你更新路径到 /users/add 它不会匹配路径再