React路由无法正常工作，当前实现方式是否正确？

我已在index.js中使用BrowserRouter对App.js进行包裹，但所有路由均无法正常工作。相关代码如下：

App.js代码 #

import { Route, Routes } from 'react-router-dom';
import './App.css';
import MainRouting from './Routing/MainRouting';
import HomePage from './Pages/HomePage.js/HomePage';
import Login from './component/Login/Login';
import Doctor from './Pages/Doctor/Doctor'

function App() {
  return (
    <div>
      <div className='m-auto'>
        <Routes>
          <Route path='/' element={<HomePage />} />
          <Route path='/doctor' element={<Doctor />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

HomePage文件代码 #

import React from 'react'
import Header from '../../component/Header/Header';
import Footer from '../../component/Footer/Footer';
import { Route, Routes } from 'react-router-dom';
import Home from '../../component/Home/Home';
import Login from '../../component/Login/Login';
import SignUp from '../../component/SignUp/SignUp';

const HomePage = () => {
  return (
    <div className=''>
      <Header />
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/login' element={<Login />} />
        <Route path='/sign-up' element={<SignUp />} />
      </Routes>
      <Footer />
    </div>
  )
}

export default HomePage;

问题原因 #

问题出在嵌套路由的路径配置：HomePage作为根路径/的渲染组件，其内部的/login、/sign-up是绝对路径，会被React Router当作独立于根路由的路径。此时访问/login时，App.js的<Routes>中没有匹配该路径的规则，因此不会渲染HomePage，自然也无法显示Login组件。

修复方案 #

方案1：将HomePage内的路由改为相对路径

把HomePage中的绝对路径改为相对路径（去掉开头的斜杠），这样路由会基于父级路径（即/）进行匹配：

修改后的HomePage代码：

import React from 'react'
import Header from '../../component/Header/Header';
import Footer from '../../component/Footer/Footer';
import { Route, Routes } from 'react-router-dom';
import Home from '../../component/Home/Home';
import Login from '../../component/Login/Login';
import SignUp from '../../component/SignUp/SignUp';

const HomePage = () => {
  return (
    <div className=''>
      <Header />
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='login' element={<Login />} />
        <Route path='sign-up' element={<SignUp />} />
      </Routes>
      <Footer />
    </div>
  )
}

export default HomePage;

方案2：调整App.js的根路由匹配规则

在App.js的根路由中使用/*通配符，让HomePage处理所有以/开头的子路径。注意要把更具体的/doctor路由放在前面，避免被/*优先匹配：

修改后的App.js代码：

import { Route, Routes } from 'react-router-dom';
import './App.css';
import MainRouting from './Routing/MainRouting';
import HomePage from './Pages/HomePage.js/HomePage';
import Login from './component/Login/Login';
import Doctor from './Pages/Doctor/Doctor'

function App() {
  return (
    <div>
      <div className='m-auto'>
        <Routes>
          <Route path='/doctor' element={<Doctor />} />
          <Route path='/*' element={<HomePage />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

额外检查 #

确保index.js中的BrowserRouter正确包裹App：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

内容的提问来源于stack exchange，提问作者Shubhanshu Gautam