Question

我真的需要一些帮助，想不出解决方案:(。我有这样的问题：例如，我在一条名为http://localhost:3000/quiz/draft的路线内，我想去{{ 1}}。但是，每当我在嵌套组件中使用http://localhost:3000/quiz/142a99fc-beb8-4de5-96c5-311cae372287或Link时，它都会继续附加到网址history上。

这是我的代码。

应用程序组件

http://localhost:3000/quiz/draft/142a99fc-beb8-4de5-96c5-311cae372287

QuizPage组件

  return (
    <div className="App">
      <Navigation />
      {currentUser ? <MenuSide /> : null }
      <Switch>

        <Route path="/quiz" render={props => (!currentUser) ? <Redirect to="/login" /> : <QuizPage {...props} /> } />
      </Switch>
    </div>
  );
}

在return ( <Switch> <Route exact path={`${match.path}/:uuid`} render={props => <QuizDetailView {...props} /> } /> <Route exact path={`${match.path}/dashboard`} render={props => <QuizDashboard {...props} />} /> <Route exact path={`${match.path}/center`} render={props => <QuizCenter {...props} /> } /> <Route exact path={`${match.path}/draft`} render={props => <QuizDraftCenter {...props} /> } /> </Switch> ); }中，我有一个组件想要导航到QuizDraftCenter

/quiz/:uuid

Answer 1

这将采用当前窗口的位置路径，删除最后一个反斜杠之后的部分，并添加新的字符串（uuid）：

<button className="quiz-button edit" onClick={() => history.push(this.props.location.pathname.split('/').slice(0,-1).join('/') + uuid)}>EDIT</button>

更多有关react-router location对象：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md

的信息

如何从内部组件导航到外部组件react-router-dom？

1 个答案: