Question

我试图学习ReactJS，新的React路由器在嵌套路由方面真的让我感到困惑。

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

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

当我点击/或/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的路径时，它不再匹配路径

React路由器呈现空白页面

1 个答案: