如何用BrowserRouter包裹内容实现React页面正常路由？

我试过十几种示例（包括这里找到的），但都没用。React的Link组件勉强能工作，但只是在页面里添加组件，不会替换原有内容。我知道得用BrowserRouter包裹App来解决，但不管把<BrowserRouter>放在<Provider store={store}>里面还是外面，整个网站都会渲染空白。

index.js #

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.scss";
import reportWebVitals from "./reportWebVitals";
import { store } from "./store";
import { Provider } from "react-redux";

//header, footer, theme
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
     <Provider store={store}>
        <App />
    </Provider>
 );

reportWebVitals();

router.js #

// Routes.js
import React from "react";
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
import Home from "./pages/home";
import About from "./pages/about";

const Router = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route exact path='/' element={<Home />} />
                <Route path='/About' element={<About />} />
            </Routes>
        </BrowserRouter>
    );
};

export default Router;

app.js #

import { useEffect } from "react";

// mui
import { Container } from "@mui/material";
import { ThemeProvider } from "@mui/system";

// theme
import theme from "./styles/theme";

// components
import Footer from "./components/footer";
import Appbar from "./components/appbar";


// styles
import "./App.css";
import About from "./pages/about";
/*import Events from './components/Events/Events';*/
import {Route, Routes } from 'react-router-dom';
import Router from "./router";

// components
import ListArticles from "./components/list-articles";

function App() {
  useEffect(() => {
    document.title = "Home";
  }, []);
    return (
        
    <ThemeProvider theme={theme}>
      <Container
        disableGutters
        maxWidth="xl"
        sx={{
          background: "#fff",
        }}
          >
     <Appbar />
    <Router />
    <Footer />
      </Container>      
    </ThemeProvider>
        
  );
}

export default App;

补充说明 #

只要注释掉index.js中的BrowserRouter（如下代码），网站内容就能正常加载；恢复标签后页面又会空白，把BrowserRouter放在Provider内部也会出现同样问题。

/* <BrowserRouter>*/
     <Provider store={store}>
        <App />
        </Provider>
    /*</BrowserRouter>*/

问题核心是重复嵌套了BrowserRouter，导致路由上下文冲突，页面无法正常渲染。以下是两种修复方案：

方案一：保留router.js中的BrowserRouter #

1. 保持index.js现有代码不变（不要额外添加BrowserRouter）
2. 修改router.js：移除exact属性（react-router-dom v6版本默认精确匹配，该属性已废弃）

// Routes.js
import React from "react";
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
import Home from "./pages/home";
import About from "./pages/about";

const Router = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path='/' element={<Home />} /> {/* 移除exact */}
                <Route path='/About' element={<About />} />
            </Routes>
        </BrowserRouter>
    );
};

export default Router;

方案二：将BrowserRouter移到index.js（推荐单实例管理） #

1. 修改index.js，在最外层包裹BrowserRouter

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.scss";
import reportWebVitals from "./reportWebVitals";
import { store } from "./store";
import { Provider } from "react-redux";
import { BrowserRouter } from 'react-router-dom'; // 引入BrowserRouter

//header, footer, theme
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <Provider store={store}>
      <App />
    </Provider>
  </BrowserRouter>
 );

reportWebVitals();

2. 修改router.js，移除内部的BrowserRouter

// Routes.js
import React from "react";
import { Route, Routes } from 'react-router-dom'; // 不再引入BrowserRouter
import Home from "./pages/home";
import About from "./pages/about";

const Router = () => {
    return (
        <Routes>
            <Route path='/' element={<Home />} /> {/* 移除exact */}
            <Route path='/About' element={<About />} />
        </Routes>
    );
};

export default Router;

完成以上调整后，路由即可正常实现组件替换，页面也不会再出现空白问题。

内容的提问来源于stack exchange，提问作者Susan Anspaugh