How can i fix this

Question

I used the latest React-dom version.Each time i run this code on terminal the page goes blank.What could be wrong with this.No console error no compilation error.Just blank `import React from "react"; import { BrowserRouter as Router, Route, Redirect, Switch, } from "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 is now using version 6. They have renamed the <Switch /> component to <Routes /> . Docs for react-router-v6-doc

Here is an simple example of how to use 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')
)