React路由器呈现空白页面

Question

我正在尝试学习ReactJS,当涉及到嵌套路由时,新的React路由器真的让我感到困惑.

我想要有三条路线,如下所示 / - home Page /users - list all the users /users/add - add user form

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

查看codesandbox.io中的代码

当我点击/或/users它工作正常.但是,当我到达/users/add路由器渲染空白页而不是AddUser组件时.

我知道我可以在index.js中定义绝对路由,就像/users和/users/add.但我有点想要有一种更可维护的方法来定义子组件内的路由器.

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

// 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>
      );
    }
}

Answer 1

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

应该

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

发生的事情是你的确切使它只匹配,/users所以当你更新/users/add它的路径时将不再匹配路径