在 ReactJS 中使用嵌套路由时遇到问题答案

【问题标题】：Trouble using nested routes in ReactJS在 ReactJS 中使用嵌套路由时遇到问题
【发布时间】：2020-10-03 00:20:30
【问题描述】：

我想在我的 React 应用程序中使用嵌套路由。我有以下MainSwitch：

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from '../Home/Home';
import Dashboard from '../Dashboard/Dashboard';
const MainSwitch = () => {
    return (
        <Switch>
            <Route path='/' component={Home}></Route>
            <Route path='/dashboard' component={Dashboard}></Route>
        </Switch>
    );
}

export default MainSwitch;

这围绕着应用程序：

import React from 'react';
import MainSwitch from './components/MainSwitch/MainSwitch';

import './css/Colors.css';
import './css/App.css';

function App() {
  return (
    <div>
      <MainSwitch />
    </div>
  );
}

export default App;

现在在Home 组件中，我有以下内容：

import React from 'react';
import HomeSwitch from '../HomeSwitch/HomeSwitch';
import NavbarDefault from '../NavbarDefault/NavbarDefault';

const Home = () => {
    return (
        <div>
            <NavbarDefault />
            <HomeSwitch />
        </div>
    );
}

export default Home;

第二个开关HomeSwitch如下：

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Landing from '../Landing/Landing';
import Login from '../Login/Login';
import Signup from '../Signup/Signup';
import Pricing from '../Pricing/Pricing';
import NotFound from '../NotFound/NotFound';

const HomeSwitch = () => {
    return (
        <Switch>
            <Route exact path='/' component={Landing}></Route>
            <Route exact path='/login' component={Login}></Route>
            <Route exat path='/signup' component={Signup}></Route>
            <Route exact path='/pricing' component={Pricing}></Route>

            <Route exact path="*"><NotFound /></Route>
        </Switch>
    );
}

export default HomeSwitch;

我使用两个路由器的原因是因为来自Home 和Dashboard 的页面会有不同的导航栏等。

如果我导航到Home 中的任何链接，则没有问题。但是，如果我尝试导航到/dashboard，我会得到NotFound 页面的404 错误。我在这里做错了什么？

【问题讨论】：

导航到仪表板时的 URL 是什么？
http://localhost:3000/dashboard
类似的 URL 可以工作，例如http://localhost:3000/login
这是因为这个<Route path='/' component={Home}></Route> 也满足http://localhost:3000/dashboard 并且一旦它进入，没有任何路由匹配/dashboard。
React Router 一旦在主开关中匹配 / 就不会“备份”，并且 /login 没有在主开关中定义，所以你会得到 NotFound。

标签： javascript reactjs react-router

【解决方案1】：

我猜你可以切换路线的顺序：

const MainSwitch = () => {
    return (
        <Switch>
            <Route path='/dashboard' component={Dashboard}></Route>
            <Route path='/' component={Home}></Route>
        </Switch>
    );
}

因为这样当您尝试访问/dashboard 时，它会首先通过<Route path='/dashboard'。而且由于这些都在Switch 中，因此此路径<Route path='/' 仅在路径不以/dashboard 开头时匹配。

【讨论】：

【解决方案2】：

将<Route exat path='/signup' component={Signup}></Route> 替换为<Route exact path='/signup' component={Signup}></Route>

注意exat这个词，而不是exat。由于同样的错误，我在这里遇到了路由问题。

【讨论】：