我怎样才能解决这个问题答案

【问题标题】：How can i fix this我怎样才能解决这个问题
【发布时间】：2022-01-07 08:56:00
【问题描述】：

我使用了最新的 React-dom 版本。每次我在终端上运行此代码时，页面都会变为空白。这可能有什么问题。没有控制台错误没有编译错误。只是空白 `从“反应”中导入反应；进口 { 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;

【问题讨论】：

标签： reactjs npm react-router navbar react-dom

【解决方案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')
)

【讨论】：