Javascript 如何从内部组件导航到外部组件？

我真的需要一些帮助，想不出解决办法：（.我有这样一个问题：例如，我在一条名为，

http://localhost:3000/quiz/draft

。我想转到

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

。但每当我在嵌套组件内使用

链接

或

历史记录

，它都会不断附加到url

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

这是我的密码

应用程序组件

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

---

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

history.push（this.props.location.pathname.split（'/'）.slice（0，-1）.join（'/'）+uuid）}>编辑

有关react router

位置的更多信息

对象：

    const { title, displayname, created, is_published, uuid } = userQuiz;
    return (
        <div className="quiz-center-item">
            <div className="item-container-1">
                <span className="title">{title}</span>
                <span className={`publish-status ${is_published ? 'green' : 'yellow'}`}>
                    {(is_published) ? 'Published' : 'Draft'}
                </span>
            </div>
            <div className="item-container-2">
                <span className="creator">{displayname}</span>
                <span className="created">{new Date(created).toLocaleString()}</span>
            </div>
            <div className="item-container-3">
                <button className="quiz-button edit" onClick={() => history.push(`${match.url}/${uuid}`)}>EDIT</button>
                <button className="quiz-button delete">DELETE</button>
            </div>

        </div>
    );
}

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