我真的需要一些帮助,想不出解决方案:(。我有这样的问题:例如,我在一条名为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
答案 0 :(得分:0)
这将采用当前窗口的位置路径,删除最后一个反斜杠之后的部分,并添加新的字符串(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