我怎样才能解决这个问题

Question

我使用了最新的 React-dom version.Each 时间我运行终端上的代码页面变为 blank.What this.No 控制台可能有问题错误没有编译 error.Just 空白 `从“反应”导入反应；进口 { BrowserRouter 作为路由器，路线，重定向，转变， } 来自“react-router-dom”；

   import About from "./Pages/About/About";
    import Contact from "./Pages/Contact/Contact";
    import Home from "./Pages/Home/Home";
    import Services from "./Pages/Home/Home";
    import Testimonial from "./Pages/Testimonial/Testimonial";
    import Navbar from "./Components/Navbar/Navbar";
    
    const App = () => {
      return (
        <Router>
          <Navbar />
          <main>
            <Switch>
              <Route path="/" exact>
                <Home />
              </Route>
              <Route path="/about" exact>
                <About />
              </Route>
              <Route path="/services" exact>
                <Services />
              </Route>
              <Route path="/testimonial" exact>
                <Testimonial />
              </Route>
              <Route path="/contact" exact>
                <Contact />
              </Route>
              <Redirect to="/" />
            </Switch>
          </main>
        </Router>
      );
    };
    
    export default App;

`

Answer 1

react-router-dom 现在使用版本 6。他们已将 <Switch /> 组件重命名为 <Routes /> 。 react-router-v6-doc

的文档

这里有一个简单的例子来说明如何使用 React Router v6

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom'

import Home from './Home'
import About from './About'

ReactDOM.render(
    <Router>
        <Routes>
            <Route exact path="/" element={<Home />} />
            <Route exact path="/about" element={<About />} />
        </Routes>
    </Router>,
    document.getElementById('root')
)

我怎样才能解决这个问题

How can i fix this

navbar

npm

reactjs

react-router

react-dom