不匹配的路由使用 React Router 渲染答案

【问题标题】：Non-matching routes are rendered with React Router不匹配的路由使用 React Router 渲染
【发布时间】：2021-03-10 04:24:07
【问题描述】：

我正在使用带有 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>
    }
}

我希望，因为我的Routes 是exact：

当我访问/ 时，只呈现TopPage 组件
当我访问/pages/1 时，只呈现IndividualPage 组件
当我访问 /no-pages 时，什么都没有呈现

但是，我观察到：

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

我做错了什么？

【问题讨论】：

为什么要在根目录下添加子节点？
“在您的根目录上添加子项”是指我的 codn 的哪一部分？我的理解是Router 应该有Routes 作为孩子，Route 应该有一个函数组件（我通过函数表达式从我的类组件中创建）作为children 属性。

标签： reactjs typescript react-router react-router-dom react-router-v4

【解决方案1】：

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

有时您需要渲染路径是否与位置匹配。在这些情况下，您可以使用功能 children 道具。它的工作原理与 render 完全一样，只是无论是否匹配都会被调用。

您可以改为使用render prop 或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>
    );
  }
}

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

【讨论】：