Javascript 反应路由器不'；刷新时不显示组件

我有嵌套的路由，第三级路由失败。 这是我的路由结构 是 啊但问题是,， App.js路由到 -家 -关于 -仪表板 然后，仪表板将子组件添加到 -配置文件（/dashboard/user） -帐户（/仪表板/帐户） -钱包（/仪表板/钱包） -设置（/仪表板/设置） 然后设置有其他子组件 -编辑配置文件（/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>
  );
};

导入{
BrowserRouter作为路由器，
转换
路线,，
重新使用
}从“反应路由器dom”；
常量应用=（）=>{
返回(
{/*设置路由*/}
);
};

MyDashboard.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>
  );
};

从“react router dom”导入{Route，useRouteMatch，NavLink，Switch}；
常量应用=（）=>{
让{path，url}=useRouteMatch（）；
返回(
导航杆
{/*设置路由*/}
);
};

设置页面

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;

导入{
转换
路线,，
用户路由匹配，
导航链接，
浏览器路由器，
}从“反应路由器dom”；
常量设置=（道具）=>{
让{path，url}=useRouteMatch（）；
返回(
导航杆
);
};
导出默认设置；

我99%确定您的问题是因为您使用的路由器不止一个。移除

设置

用户界面周围的

浏览器路由器

。我猜当嵌套路由没有通过外部路由器的链接导航到时，

匹配

道具没有像您期望的那样初始化

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>
  );
};

因此，例如，如果路径为“/dashboard/settings/editprofile”，则路径不再与路由路径完全匹配，并且路由不会被渲染

解决方案 只需省略嵌套管线渲染子管线的

exact

prop即可。请记住，路由路径将被视为“前缀”，因此，如果未指定

exact

prop，则路径“/dashboard/settings/editprofile”可以与“/dashboard/settings”匹配

const仪表板=（）=>{
让{path，url}=useRouteMatch（）；
返回(
仪表板导航栏
设置
{/*设置路由*/}
...
//现在，设置页面不再呈现其子组件，即使我通过links@BemsenDaniel您是否可以尝试创建一个运行的代码沙盒来重现此问题？具有三级路由嵌套的内容？@Bemsensandiel我想我发现了其他子路由未呈现的问题/原因。您是spe将一些嵌套路由指定为完全匹配路径前缀，这会阻止嵌套子路由匹配。我已更新并添加到我的答案中。请查看。哇！！！我很高兴！！非常感谢，即使在我刷新时，它也可以正常工作！谢谢，谢谢，谢谢！！！@Bemsendaiel很棒！如果您发现解释有帮助，请也投票谢谢，祝你好运，伙计。
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>
  );
};

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>
  );
};