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

Question

我有嵌套路由，第三级路由失败。 这是我的路由结构 是啊……但问题是， App.js 路由至 -家 -关于 -仪表板 然后仪表板有子组件 -个人资料(/仪表板/用户) - 帐户(/仪表板/帐户) -钱包(/仪表板/钱包) - 设置(/仪表板/设置) 然后Settings还有其他子组件 -编辑个人资料(/dashboard/settings/editprofile) - 编辑密码和 Pin 图 (/dashboard/settings/editpassword) -编辑帐号(/dashboard/settings/editnumber)

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

这是我的 App.js 路由设置

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";

const App = () => {
  return (
    <div className="App">
      {/* setting up the routes */}
      <Router>
        <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>
  );
};

我的 DashBoard.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,
} from "react-router-dom";

const Settings = (props) => {
  let { path, url } = useRouteMatch();

  return (
    <div className="Settings">
      <BrowserRouter>
          <nav> Navavigation 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>
      </BrowserRouter>
    </div>
  );
};

export default Settings;

Answer 1

我 99% 确定您的问题是因为您使用了超过 1 个路由器。删除 Settings UI 周围的 BrowserRouter。我猜测当嵌套路由没有通过外部路由器的链接导航到时， 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>
  );
};

编辑

好吧，当删除嵌套路由器并创建我自己的codesandbox时，我发现了嵌套路由的一个小、微妙但重要的“怪癖”。任何渲染进一步路由的嵌套路由都不能在路由上指定 exact 属性。

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”，则路径不再完全匹配路线路径，并且路线不会呈现。 p>

解决方案

只需省略嵌套路由渲染子路由的 exact 属性即可。请记住，路由路径将被视为“前缀”，因此如果没有指定 exact 属性，则路径“/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>
  );
};