如何在React-Router中处理Route内的多个路径

时间:2018-12-02 17:06:52

标签: reactjs react-router

我想在一个Route中处理两条不同的路线,这是代码:

<Route exact path={['/$:username', '/$:username/:section']} render={(props)=><FullProfile {...props} me={this.props.me}/>} />

FullProfile里面,我将操纵道具。但是,如果我输入第一个路径,则username参数将是undefined,如果我输入第二个路径,则将按原样获取它。

为澄清起见,假设我输入mydomain.com/$john,则props.match将是:

params:
section: undefined
username: undefined

如果我输入mydomain.com/$john/likes,则props.match将是:

params:
section: "likes"
username: "john"

当我输入第一个路径时,usernameundefiend,为什么?如您所见,我将路径放入数组,因此在两种情况下都可以正常工作。

1 个答案:

答案 0 :(得分:0)

仅从react-router v4.4开始支持字符串路径数组。更新到最新版本的react-router-dom,以使用字符串数组作为路径

工作演示

https://codesandbox.io/s/8yo61w900l