Javascript React中的路径匹配

我想用url

users/：userId

创建一个页面，其中userId将位于（java，cpp，c）。因此，在主页中，如果单击java按钮，它将打开一个带有url

users/java

的页面，同样适用于c和cpp。所有这些页面将具有相同的布局和不同的数据。为此，我制作了一个简单的组件，如

Lang.jsx

export class Lang extends Component{
  render() {
  const { data } = this.props;
    return (
      <div>
       <h1>{data.lang}</h1>
      </div>);
  }
}

导出类扩展组件{
render（）{
const{data}=this.props；
返回(
{data.lang}
);
}
}

在路由器课上，我们必须写一些

<Route path="users/:userId" component={Lang} />

但目前尚不清楚如何在路由器和服务器中传递

用户ID

---

为每个url加载

Lang

？

我不完全确定您在这里要做什么，但是如果您查看一下

this.props

Lang内部的

params

键（

this.props.params

），它将是一个包含

用户ID

的对象

例如：

这意味着当您转到

/user/1234

时，

userId

键的值将为

1234

---

我不确定您对

data.lang

的期望值是多少。您是否在另一条提供该道具的路线中包装路线？您使用什么库来编写lang？

对这些java、cpp、c使用链接，如下所示：

<Link to='users/java'>Java</Link>
<Link to='users/cpp'>Cpp</Link>
<Link to='users/c'>C</Link>

hashHistory.push('users/java');

注意：您可以将该userid设置为可选的，因为如果不传递userid，它将与任何路由都不匹配，请这样编写以使其成为可选的：

<Route path="users/(:userId)" component={Lang} />

现在如果你没有通过任何东西，那么它也会打开Lang页面

还有一件事，因为您是通过名称userId传递参数的，所以它将通过

this.props.params.userId

而不是通过

this.props.data.lang

可用

<Route path="users/(:userId)" component={Lang} />