Reactjs React路由器v5-无精确道具的嵌套路由

我的App.tsx：

<Switch>
  <Route exact path="/" component={LoginPage} />
  <Route path="/dashboard" component={Dashboard} />
  <Route path="*" component={NoMatch} />
</Switch>

另外，如果您想完全重定向到另一个页面，只需使用

：

---

在这样的场景中，最好的方法是为不存在的路由渲染404页面

您可以将代码更改为类似的内容，如

const { path } = useRouteMatch();

<Switch>
  <Route exact path={`${path}`} component={DashboardIndex} />
  <Route path={`${path}/users`} component={Users} />
  <NotFoundRoute />
</Switch>

const{path}=useRouteMatch（）；

---

请参阅检查未找到路由的执行情况

我以前用过类似的东西，希望对你有所帮助

const { path } = useRouteMatch();

<Switch>
  <Route exact path={`${path}`} component={DashboardIndex} />
  <Route path={`${path}/users`} component={Users} />
  <Route path="*" component={NoMatch } />
</Switch>

---

使用这种“声明性”方式，可以在嵌套结构中的任何位置放置

？例如，我在App.tsx中有一条未找到的路线，然后在仪表板中，如果我有“/cars”，我也会在那里声明未找到的路线吗？如果

也会有嵌套的路由呢？我应该处理

用户

组件中未找到的案例？嵌套结构中的任何位置都可以有NotFoundRoute。您需要记住的唯一一件事是，此NotFoundRoute必须始终位于switch语句中

<Route path={`${path}/*`}>
  <Redirect to="/path" />
</Route>

const { path } = useRouteMatch();

<Switch>
  <Route exact path={`${path}`} component={DashboardIndex} />
  <Route path={`${path}/users`} component={Users} />
  <NotFoundRoute />
</Switch>

const { path } = useRouteMatch();

<Switch>
  <Route exact path={`${path}`} component={DashboardIndex} />
  <Route path={`${path}/users`} component={Users} />
  <Route path="*" component={NoMatch } />
</Switch>

function NoMatch() {
  let location = useLocation();

  return (
    <div>
      <h3>
        No match for <code>{location.pathname}</code>
      </h3>
    </div>
  );
}