Question

我想创建一个页面为url users/:userId，其中userId将是（java，cpp，c）。在主页中如果单击java按钮，它将打开一个机智网址users/java，类似地对于c和cpp.All这些页面将具有相同的布局和不同的数据。为此我创建了一个简单的组件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，如下所示：

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

如果您使用history.push()，请按以下方式编写：

hashHistory.push('users/java');

注意：您可以将该用户ID设为可选项，因为如果您不通过用户ID，则它将与任何路由不匹配，请将其写为可选项：

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

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

因为您按名称userId传递参数，所以还有一件事，因此this.props.params.userId而不是this.props.data.lang可以使用它。

Answer 2

我不完全确定你在这里尝试做什么，但是如果你看一下lang里面的this.props，就会有一个params键（{ {1}}），它将是一个包含this.props.params。

的对象

例如：

userId

这意味着当您转到this.props = { params: { userId: '1234', }, }时，/user/1234键的值为userId。

我不确定你期待1234的价值是什么。您是否将路线包裹在提供该支柱的另一条路线中？您使用什么库来获取lang？

React中的路由匹配

2 个答案: