当我刷新时，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>  );};我的仪表板.jsimport { 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) => {

  let { path, url } = useRouteMatch();

  return (

    <div className="Settings">

      <nav>Navigation bar</nav>

      <div className="SettingsWrapper">

        <Switch>

          <Route path={`${path}/editprofile`} component={EditProfile} />

          <Route

            path={`${path}/changepassword`}

            component={ChangePassword}

          />

          <Route path={`${path}/changepin`} component={ChangePin} />

          <Route

            path={`${path}/accountsettings`}

            component={BankSettings}

          />

        </Switch>

      </div>

    </div>

  );

};

编辑

好吧，当删除嵌套路由器并创建我自己的代码和盒子时，我发现了嵌套路由的一个小、微妙但重要的“怪癖”。任何渲染更多路由的嵌套路由都不能指定exact路由上的 prop。

const App = () => {

     let { path, url } = useRouteMatch();

  return (

    <div className="App">

       <nav>Navigation bar</nav>

      {/* setting up the routes */}

      <div className="MainBody">

        <Switch>

          ...

          <Route

            path={`${path}/settings`}

            exact // <-- exact match precludes sub-routes!!

            component={Settings}

          />

        </Switch>

      </div> 

    </div>

  );

};

因此，如果路径是“/dashboard/settings/editprofile”，则路径不再与路由路径完全匹配，并且不会呈现路由。

解决方案

exact只需省略嵌套路由渲染子路由的 prop即可。请记住，路由路径将被视为“前缀”，因此如果没有exact指定 prop，路径“/dashboard/settings/editprofile”可以与“/dashboard/settings”匹配。

const Dashboard = () => {

  let { path, url } = useRouteMatch();

  return (

    <div className="App">

      <nav>Dashboard Navigation bar </nav>

      <NavLink to={`${url}/settings`}>Settings</NavLink>

      {/* setting up the routes */}

      <div className="MainBody">

        <Switch>

          ...

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

        </Switch>

      </div>

    </div>

  );

};