当我刷新时，React Router 不显示组件

Question

我有嵌套路由，第三级路由失败。这是我的路由结构是的....但问题是，App.js 路由到 -Home -About -Dashboard 然后 Dashboard 有子组件到 -Profile (/dashboard/user) -Account (/dashboard/account) -Wallet (/dashboard/wallet) - 设置 (/dashboard/settings) 然后设置还有其他子组件 - 编辑个人资料 (/dashboard/settings/editprofile) - 编辑密码和 Pin 图 (/dashboard/settings/editpassword) - 编辑帐号 (/仪表板/设置/编辑编号）

前两级路由正在工作，但是当我刷新页面时，最后一个路由失败，尽管当我返回主页并单击链接直到到达最后一个组件时它会呈现，但是一旦我刷新浏览器，它就会中断，当我手动输入时它也不起作用。

这是我的 App.js 路由设置

import {

  BrowserRouter as Router,

  Switch,

  Route,

  Redirect,

} from "react-router-dom";

const App = () => {

  return (

    <div className="App">

      {/* setting up the routes */}

        <Switch>

          <Route path="/" exact component={Home} />

          <Route path="/dashboard" component={dashboard} />

          <Route path="/login" exact component={Login} />

          <Route path="/register" exact component={SignUp} />

          <Route path="/about" exact component={AboutServices} />

        </Switch>

      </Router>

    </div>

  );

};

我的仪表板.js

import { Route, useRouteMatch, NavLink, Switch } from "react-router-dom";

const App = () => {

     let { path, url } = useRouteMatch();

  return (

    <div className="App">

       <nav> Navavigation bar <nav>

      {/* setting up the routes */}

    <div className="MainBody">

      <Switch>

        <Route path={`${path}/wallet`} exact component={Wallet} />

        <Route path={`${path}/profile`} component={Profile} />

        <Route path={`${path}/account`} component={Account} />

        <Route path={`${path}/settings`} exact component={Settings} />

      </Switch>

    </div> 

    </div>

  );

};

设置页面

import {

  Switch,

  Route,

  useRouteMatch,

  NavLink,

  BrowserRouter,

} 

Answer 1

我 99% 确定您的问题是因为您使用了超过 1 个路由器。删除UIBrowserRouter周围的内容Settings。我猜测当嵌套路由没有通过外部路由器的链接导航到时，该match道具不会像您期望的那样初始化。const Settings = (props) => {&nbsp; let { path, url } = useRouteMatch();&nbsp; return (&nbsp; &nbsp; <div className="Settings">&nbsp; &nbsp; &nbsp; <nav>Navigation bar</nav>&nbsp; &nbsp; &nbsp; <div className="SettingsWrapper">&nbsp; &nbsp; &nbsp; &nbsp; <Switch>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route path={`${path}/editprofile`} component={EditProfile} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path={`${path}/changepassword`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component={ChangePassword}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route path={`${path}/changepin`} component={ChangePin} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path={`${path}/accountsettings`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component={BankSettings}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </Switch>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );};编辑好吧，当删除嵌套路由器并创建我自己的代码和盒子时，我发现了嵌套路由的一个小、微妙但重要的“怪癖”。任何渲染更多路由的嵌套路由都不能指定exact路由上的 prop。const App = () => {&nbsp; &nbsp; &nbsp;let { path, url } = useRouteMatch();&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp;<nav>Navigation bar</nav>&nbsp; &nbsp; &nbsp; {/* setting up the routes */}&nbsp; &nbsp; &nbsp; <div className="MainBody">&nbsp; &nbsp; &nbsp; &nbsp; <Switch>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path={`${path}/settings`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; exact // <-- exact match precludes sub-routes!!&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component={Settings}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </Switch>&nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp; &nbsp; </div>&nbsp; );};因此，如果路径是“/dashboard/settings/editprofile”，则路径不再与路由路径完全匹配，并且不会呈现路由。解决方案exact只需省略嵌套路由渲染子路由的 prop即可。请记住，路由路径将被视为“前缀”，因此如果没有exact指定 prop，路径“/dashboard/settings/editprofile”可以与“/dashboard/settings”匹配。const Dashboard = () => {&nbsp; let { path, url } = useRouteMatch();&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <nav>Dashboard Navigation bar </nav>&nbsp; &nbsp; &nbsp; <NavLink to={`${url}/settings`}>Settings</NavLink>&nbsp; &nbsp; &nbsp; {/* setting up the routes */}&nbsp; &nbsp; &nbsp; <div className="MainBody">&nbsp; &nbsp; &nbsp; &nbsp; <Switch>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route path={`${path}/settings`} component={Settings} /> // <-- no exact match&nbsp; &nbsp; &nbsp; &nbsp; </Switch>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );};