添加 React Router returns 我的空白网页无法正常工作

Question

当我在 App.jsx 文件中 return 只有 <NavBar> 时，它会打印出我想要的内容（左侧的导航栏和我的图标菜单）但是当我使用Router/Switch 模块，网页是空白的任何想法为什么它不工作？

import { BrowserRouter, Route, Routes, Switch } from 'react-router-dom'
import NotFound from './Pages/Errors/NotFound';
import NavBar from './Components/NavBar';
import Dashboard from './Pages/Dashboard/Dashboard';
import User from './Pages/User/User';
import About from './Pages/About/About';


export default function App() {
  return (
    <BrowserRouter>
      <NavBar/>
      <Switch>
        <Routes>
          <Route exact path="/"  element={<Dashboard />} />
          <Route path = "/user"  element={<User />} />
          <Route path = "/about"  element={<About />} />
        </Routes>
      </Switch>
    </BrowserRouter>    
   
  );
}

这是“关于”页面：

import React from 'react'

export default function About () {
    return (
        <div>
            <h2 className="text-2xl">About</h2>
            <h1> How you can contact us?
            </h1>
        </div>
    )
}

这是我得到的图片：

文本打印在 NavBar 的正下方，而不是新出现在 NavBar 的右侧。

Answer 1

据我所知，您似乎正在使用 react-router-dom@6 并且出于某种原因包含了 v5 Switch 组件。 Switch 组件在精神上被 Routes 组件取代，它不是 v6 API 的一部分，应该删除。

import { BrowserRouter, Route, Routes } from 'react-router-dom'
import NotFound from './Pages/Errors/NotFound';
import NavBar from './Components/NavBar';
import Dashboard from './Pages/Dashboard/Dashboard';
import User from './Pages/User/User';
import About from './Pages/About/About';

export default function App() {
  return (
    <BrowserRouter>
      <NavBar/>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/user" element={<User />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>  
  );
}

添加 React Router returns 我的空白网页无法正常工作

Adding React Router returns me a blank web page not working

javascript

css

dom

reactjs

react-router