我在 React 上写了代码，添加了 router-dom。为什么我在 React 上看不到我的页面？答案

【问题标题】：I wrote code on react, add router-dom. Why i can't see my page on React?我在 React 上写了代码，添加了 router-dom。为什么我在 React 上看不到我的页面？
【发布时间】：2022-11-20 19:43:49
【问题描述】：

我尝试在 React 上启动我的项目。我写了 Router，当我启动项目时我什么也看不到

这是我的代码，怎么了？

import "./App.css";
import "./Components/MainContent/Main/MainContent.module.css"
import "./Components/Header/Header.module.css"
import "./Components/Navbar/Navbar.module.css"
import Header from "./Components/Header/Header";
import Navbar from "./Components/Navbar/Navbar";
import MainContent from "./Components/MainContent/Main/MainContent";
import {Router, Route, Routes} from "react-router-dom";
import Catalog from "./Components/MainContent/Catalog/Catalog"
import Busket from "./Components/MainContent/Busket/Busket"
import Contacts from "./Components/MainContent/Contacts/Contacts"
import Support from "./Components/MainContent/Support/Support"


function App() {
    return (
        <div className="appWeb">
            <Header />
            <Navbar />
            <Router>
                <Routes>
                <Route path='/MainContent' element={<MainContent/>} />
                <Route path='/Catalog' element={<Catalog/>} />
                <Route path='/Busket' element={<Busket/>} />
                <Route path='/Contacts' element={<Contacts/>} />
                <Route path='/Support' element={<Support/>} />
                </Routes>
            </Router>
        </div>

  );
}


export default App;

我尝试在路由器中包装 div className="appWeb"，但没有帮助

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

你什么也看不到，因为没有带 path="/" 的路由，只需添加它或导航到某个路径

【讨论】：

谢谢，我应该更换 BrowserRouter 而不是 Router，但是你帮我解决了下一个问题！谢谢你！

【解决方案2】：

我不是 React 的专家，但这可能会有所帮助

<BrowserRouter>
    <Routes>
        <Route
         index
         path={ "Your Path" }
         exact
         element={<YourComponent/>}
         />
         <Route
          path={"Your Path"}
          exact
          element={<YourComponent />}
         />
    </Routes>
</BrowserRouter>

使用 BrowserRouter 代替路由器。你也可以在你的Route之一中添加属性index，表示这条路由是你的应用启动路由

【讨论】：

我是真的！谢谢你！