javascript - React-router-dom v6 显示除默认 URL 之外的空白页面

Question

由于某种原因，当我尝试从localhost转到localhost/Products或localhost以外的任何地方时，会显示一个空白页面。我还不明白为什么。在 localhost 上，显示了正确的组件:App.js，其中包含导航栏、主页和页脚。

index.js

import React from 'react';
import App from './App';
import DashboardApp from './DashboardApp';
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min";
import { render } from '@testing-library/react';
import { StrictMode } from 'react';
import { BrowserRouter,Routes,Route } from 'react-router-dom';
import Account from './pages/Account';



render(
  <StrictMode>
    <BrowserRouter>
    <Routes>
    <Route path='/' element={<App />} />
    {/* <Route path='/Login' element={<Login />}></Route> */}
    <Route path='/Account' element={<Account />}/>
    <Route path='/Dashboard' element={<DashboardApp />}/>
    </Routes>
    </BrowserRouter>
    
  </StrictMode>,
  document.getElementById('root')
);

此外，我在 DashboardApp 组件内有更多无法正常工作的路由，当我尝试输入其中一个 URL 时，它总是将我重定向到 App.js，除了 localhost/Dashboard URL它加载正确的页面。尽管这可能是一个不相关的问题。

import Products from "./pages/Products";
import Contact from "./pages/Contact";
import AboutUs from "./pages/AboutUs"
import { Routes, Route } from "react-router-dom";
import Home from './pages/Home';
import Footer from "./components/sections/Footer";
import {NavBar} from "./components/sections/NavBar";
import 'bootstrap-icons/font/bootstrap-icons.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'mdb-react-ui-kit/dist/css/mdb.min.css';
import "@fortawesome/fontawesome-free/css/all.min.css";


export default function App() {
  return (
    <>
      <NavBar/>
      <Routes>      
          <Route path="" element={<Home />} />
          <Route path='/Products' element={<Products/>}/>
          <Route path='/Contact' element={<Contact />} />
          <Route path='/AboutUs' element={<AboutUs />} />
      </Routes>
      <Footer/>
    </>
    
  );
}

Answer 1

App 和 Dashboard 组件正在渲染后代路由，因此父路由必须附加通配符 “*”，也称为"splats" , matcher 表示一条路由可以匹配它的所有子路由。

示例:

<StrictMode>
  <BrowserRouter>
    <Routes>
      <Route path='/*' element={<App />} />
      {/* <Route path='/Login' element={<Login />}></Route> */}
      <Route path='/Account' element={<Account />}/>
      <Route path='/Dashboard/*' element={<DashboardApp />}/>
    </Routes>
  </BrowserRouter>
</StrictMode>

export default function App() {
  return (
    <>
      <NavBar />
      <Routes>      
          <Route index element={<Home />} />
          <Route path="/Products" element={<Products />} />
          <Route path="/Contact" element={<Contact />} />
          <Route path="/AboutUs" element={<AboutUs />} />
      </Routes>
      <Footer/>
    </>
  );
}