使用反应路由器时没有出现任何内容

Question

我的反应路由器有问题。

所以我正在构建一个网站的导航，当我做路线时，什么也没有出现。

你能帮我看看我做错了什么吗？

页面保持白色。什么也没有出现，甚至 root 也看不到主页。 ...................................................... ...................................... 主页：

import React from 'react';
import Navbar from '../allpages/navbar/Navbar';
import {
    BrowserRouter as Router, Routes, Route
} from "react-router-dom";
import Contact from "../contact/Contact";
import About from "../about/About";
const Home = () => {
    return (
        <>
            <Router>
                <Navbar />
                <Routes>
                    <Route  path="/about" element={About} />
                    <Route  path="/contact" element={Contact} />
                    <Route exact path="/" element={Home} />
                </Routes>
            </Router>

            <h3>Home</h3>
        </>
    )
}

export default Home

导航栏：

import React from 'react';

import {
    BrowserRouter as  Link
} from "react-router-dom";

const Navbar = () => {
    return (
   
            <div>
                <nav>
                    <ul>
                        <li>
                            <Link to="/home">Home</Link>
                        </li>
                        <li>
                            <Link to="/about">About</Link>
                        </li>
                        <li>
                            <Link to="/contact">Contact</Link>
                        </li>
                    </ul>
                </nav>
            </div>
        
        
    )
}

export default Navbar

主应用程序：

import './App.css';
import Home from './components/home/Home'
function App() {
  return (
    <>
      <Home />
    </>
  );
}

export default App;

联系人：

import React from 'react';

const Contact = () => {
    return (
        <div>
            <h3>Contact</h3>
        </div>
    )
}

export default Contact

关于：

import React from 'react';
const About = () => {
    return (
        <div>
            <h1>About</h1>
        </div>
    )
}

export default About

Answer 1

因此，除了这个拼写错误：

 { BrowserRouter as Link } // use just Link

在 Navbar.js 内部，

我还会使用 React-Router 团队推荐的方法。它使用 组件来包装页面。您正在使用 Routes 代替，不知道这是否有效。
您可以查看以下示例： https://v5.reactrouter.com/web/example/basic< /a>
这与您的代码非常相似。

Answer 2

您使用什么版本？你可能已经过时了

<React.Suspense fallback={<p>Loading...</p>}>
                <Routes>
                    <Route path="/*" element={<Outlet />}>
                  
                    <Route path="informacion-financiera" element={<Financiera />} />
                    <Route path="derechos-de-autor" element={<Author />} />
                    <Route 
                    </Route>
                </Routes>
            </React.Suspense>
    ```

Answer 3

您使用什么版本？你可能已经过时了

<React.Suspense fallback={<p>Loading...</p>}>
                <Routes>
                    <Route path="/*" element={<Outlet />}>
                  
                    <Route path="informacion-financiera" element={<Financiera />} />
                    <Route path="derechos-de-autor" element={<Author />} />
                    <Route 
                    </Route>
                </Routes>
            </React.Suspense>
    ```


You have browserRouter as Link so yow links are not links