React 路由路径参数和重定向

【问题标题】：React Route Path Parameter and RedirectReact 路由路径参数和重定向
【发布时间】：2020-05-13 03:43:37
【问题描述】：

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

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

    <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>

我想要一些类似重定向功能和渲染参数组件的东西。

用户使用网址 www.example.com/clubname1
单击 NavLink to='/member' 后，它会重定向到 (www.example.com/clubname1/mebmer) 和以clubname1为参数，渲染对应的会员数据。
联赛和赛程的功能相同。

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

【问题讨论】：

标签： reactjs react-router

【解决方案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}这是你的参数。

【讨论】：