javascript - React 中的路由匹配

Question

我想制作一个带有 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>);
  }
}

在 Router 类中，我们必须编写一些内容

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

但不清楚如何在路由器中传递userId为每个网址加载Lang？

Answer 1

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

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

如果您使用history.push()，那么这样写:

hashHistory.push('users/java');

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

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

现在，如果您不传递任何内容，它也会打开 Lang 页面。

还有一件事，因为您是通过名称 userId 传递参数，所以它将通过 this.props.params.userId 而不是通过 this.props.data.lang 来使用>.