开玩笑：反应路由器测试返回未定义的“参数”

Question

我正在尝试使用MemoryRouterReact-router 文档中指示的具有初始条目的组件来测试组件，以便我可以在包装的组件中包含参数。

组件示例：

render () {
  console.log(this.props.match.params.item)
}

在应用程序中（工作正常）：

<Router>
  <Switch>
    <Route exact path='/' render={() => (
      <Redirect to={`/${guessLocale()}`} />
    )} />
    <Route exact path='/:lang' component={Home} />
    <Route exact path='/:lang/:itemName' component={Vidactic} />
  </Switch>
</Router>

在测试中（从酶挂载，匹配未定义）：

mount(<MemoryRouter initialEntries={['/fr/pamp']}>
  <Vidactic />
</MemoryRouter>)

所以我使用了这个解决方法，但为什么 initialEntries 本身不起作用？

mount(<MemoryRouter initialEntries={['/fr/pamp']}>
  <Vidactic match={{ params: { item: 'pamp' } }} />
</MemoryRouter>)

Answer 1

有没有Route在您的测试，所以不匹配会发生，并且this.props.match将未定义Vidactic。添加路线应该使它工作：

mount(
  <MemoryRouter initialEntries={['/fr/pamp']}>
    <Route exact path="/:lang/:itemName" component={Vidactic} />
  </MemoryRouter>
);

为避免重复路由，您可能希望将<Switch>..</Switch>部件放在单独的组件中并在测试中使用它。