Как я могу перейти от внутреннего компонента к внешнему компоненту response-router-dom?

Question

Мне действительно нужна помощь, не могу придумать решение :(. У меня проблема вроде этой: Например, я нахожусь внутри маршрута с именем http://localhost:3000/quiz/draft. Я хочу от go до http://localhost:3000/quiz/142a99fc-beb8-4de5-96c5-311cae372287. Но всякий раз, когда я использую Link или history внутри вложенного компонента, он постоянно добавляет к URL http://localhost:3000/quiz/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>
  );
}

Компонент QuizPage

    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

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

Answer 1

Здесь берется текущий путь расположения окна, удаляется деталь после последнего обратного знака sh и добавляется новая строка (uuid):

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

Дополнительная информация об объекте реагирует на маршрутизатор location: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md