如何让 BrowserRouter 包装我的内容，以便我的页面能够正确路由？答案

【问题标题】：How do I get BrowserRouter to Wrap my Content so my pages will route properly?如何让 BrowserRouter 包装我的内容，以便我的页面能够正确路由？
【发布时间】：2022-11-19 02:47:24
【问题描述】：

注意：我已经尝试了十几个例子。有些我确实在这里找到了。没有为我工作。

我确实让 React 中的链接可以正常工作，但它们会向页面添加一个组件，而不是替换它。
我知道要解决这个问题，我需要在 BrowserRouter 中包装应用程序，但我尝试的每一种方式都会使整个网站呈现空白。

因此，在下面的 <Provider store={store}><App /></Provider> 中，如果我尝试将 <BrowserRouter> 标签放在 <Provider> 标签的外部或内部，网站将呈现空白。我缺少什么？

这是我的 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";

const Router = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path='/' element={<Home />} />
            </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 />
        <Footer />
          </Container>      
        <Router />
            </ThemeProvider>
        
  );
}

export default App;

【问题讨论】：

Router 组件正在呈现 BrowserRouter，它包装了一个 Routes 组件，后者呈现单个 Route 呈现一个 Home 组件。 Router 呈现在 Container 中的 Appbar 和 Footer 下方。您还尝试渲染哪些其他路线？你想链接到什么？在哪里呈现任何链接？目前还不清楚是什么问题。

标签： reactjs react-router

【解决方案1】：

您在路线中缺少 EXACT 属性。如果您不将它添加到您的初始路由组件（'/'），该路由仍将被识别为正确的。

<Route exact path='/' element={<Home />} />

【讨论】：