javascript - React 路由器呈现空白页面

Question

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

我只想有如下三个路线
/- 主页
/users - 列出所有用户
/users/add - 添加用户表单


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

View code in 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时它不再与路径匹配