Question

我正在尝试在路径前面添加一个参数。

目前，我只有确切的路径。

    <Switch>
      <Route exact path='/' component={HomePage} />
      <Route exact path='/member' component={Member} />
      <Route exact path='/league' component={League} />
      <Route exact path='/fixture' component={Fixture} />
      <Route exact path='/user' component={User} />
    </Switch>


    <navLink to='/member' activeClassName='active'>
    </navLink>

我想要一些类似重定向功能并渲染param的组件。

用户输入的网址为www.example.com/clubname1
点击NavLink到='/ member'后，它将重定向到（www.example.com/clubname1/mebmer），使用clubname1作为参数并呈现相应的成员数据。
联赛和比赛的功能相同。

如何通过修改NavLink或Route来实现上述功能。

Answer 1

起初，您的路线将像波纹管

<Route path="/:id/member" component={Member} />

:id是您需要的参数。

现在，当您使用NavLink呼叫路线时，就像波纹管

<NavLink to="/10231/member">Member</NavLink>

所以这里10231是您的参数

，您可以访问以下参数

export function Member(props) {
  return (
    <h1>
      I am your memeber id {props.match.params.id} componenet. write your code
      here
    </h1>
  );
}

{props.match.params.id}是您的参数。

反应路线路径参数并重定向

1 个答案: