使用 React Router 呈现不匹配的路由

Question

我正在使用带有 TypeScript 的 React Router。这里有两条路线，分别是/和/pages/id.

class MyComponent extends React.Component
{
    render()
    {
        return <BrowserRouter>
        <div>
            <Route exact path='/' children={
                () =>
                <TopPage />} />
            <Route exact path='/pages/:id' children={
                (props: RouteComponentProps<{id: string}>) =>{
                    console.log(props)
                    return <IndividualPage match={props.match} />}} />
        </div>
        </BrowserRouter>
    }
}

我预计，因为我的 Route 是 exact:

当我访问 / 时，仅呈现 TopPage 组件
当我访问 /pages/1 时，仅呈现 IndividualPage 组件
当我访问 /no-pages 时，没有呈现任何内容

然而，我观察到：

当我访问 / 或 /no-pages 时，IndividualPage 组件使用 match=null 呈现（导致 Cannot read property 'params' of null 错误）
当我访问 /pages/1 时，TopPage 和 IndividualPage 组件都被渲染

我做错了什么？

Answer 1

有四种不同的方法可以为 Route 设置渲染组件，其中一些方法的行为与其他方法略有不同。将 children 属性设置为渲染函数是其中一种方法，但根据您期望的行为，它不是您想要的方法。与其他方法不同，children 函数的内容总是呈现，即使当前页面不匹配也是如此。因此，您将在每个页面上呈现这两个组件。每 the docs:

Sometimes you need to render whether the path matches the location or not. In these cases, you can use the function children prop. It works exactly like render except that it gets called whether there is a match or not.

您可以使用 render prop or the component prop。这些只会在路由匹配时呈现。

Router 的默认行为是呈现所有匹配的 Routes，而不仅仅是第一个。实际上，这不是您的示例的问题，因为您有两条 exact 路线，因此两条路线都不可能匹配。但作为一种习惯，我建议将 Route 组件放在 Switch component 中，这样只会呈现第一个匹配的 Route.

class MyComponent extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={TopPage} />
          <Route exact path="/pages/:id" component={IndividualPage} />
        </Switch>
      </BrowserRouter>
    );
  }
}

这里不需要 typescript 注释，因为 Route 组件知道 RouteComponentProps 将被传递给组件。

使用 React Router 呈现不匹配的路由

Non-matching routes are rendered with React Router

typescript

reactjs

react-router

react-router-v4

react-router-dom