Question

我使用react-router-dom在我的视图之间导航。到目前为止，它一直有效。我添加了两条新路线，但我遇到了问题。已经存在的路由仍然可以正常工作，但是当我尝试切换到新路由时，URL会正确更改，但是该组件未显示，我仍然有旧的路由，我必须对其进行更新才能看到我的新组件。（在某些路线上，当我刷新时，肯定有旧组件，然后是新组件。）

<BrowserRouter>
  <MainPage/>
</BrowserRouter>

主页：

  <div>
    <AppBar/>
    <Main/>
  </div>

部分应用栏的链接无效：

<Menu.Menu position="right">
   <Dropdown item text='Administration'>
     <Dropdown.Menu>
        <Link to={"/admin"}><Dropdown.Item style={{color: "black"}}>Accueil</Dropdown.Item></Link>
        <Dropdown.Header>Utilisateurs</Dropdown.Header>
        <Link to={"/admin/users"}><Dropdown.Item style={{color: "black"}}>Liste des utilisateurs</Dropdown.Item></Link>
      </Dropdown.Menu>
    </Dropdown>
    <Menu.Item name="disconnect" onClick={this.handleClickDisconnect} />
</Menu.Menu>

主要：

<div>
  <Switch>
    <Fragment>
      <Route exact path="/" component={MapNox} />
      <Route path='/map' component={MapNox} />
      <Route path="/resetPassword" component={ResetPassword} />
      <Route path="/forgotPassword" component={ForgotPassword} />
      <Route path="/cgu" component={Cgu} />
      <AdminRoute path="/admin" component={HomeAdmin} />
      <AdminRoute path="/admin/users" component={ListUser} />
    </Fragment>
  </Switch>
</div>;

AdminRoute：

renderComponent(Cmp, props) {
    const {currentUser} = this.props;
    return currentUser.role === "ADMIN" ? <Cmp {...props}/> : <Redirect to={{pathname: '/', state: {from: props.location}}}/>;
  }

  render() {
    const {component: Cmp, ...rest} = this.props;
    return <Route {...rest} render={(props) => this.renderComponent(Cmp, props)}/>;
  }

如果有什么我可以调查的线索，谢谢！

网址更改时组件不变

0 个答案: