It show white screen and console error ( No routes matched location "/" )

import {BrowserRouter as Router, Switch, Routes, Link} from 'react-router-dom'; 
import Home from './pages/Home';
import About from './pages/About';

function App(){
    return <>
            

            <Router>
            <Link to="/">Home</Link> 
            <Link to="/About">About</Link>

                <Routes path={'/'} elements={<Home />}  />
                <Routes path={'/About'} elements={<About />} />
            </Router>       
    </>;
}

export default App;

Please Help me. Thanx in Advance.

CodePudding user response：

A few things needs to be corrected,

1. Route should be wrapped inside Routes.
2. prop name for Route should be element not elements.

Try like below

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Routes,
  Link
} from "react-router-dom";

import Home from "./Home";
import About from "./About";

function App() {
  return (
    <Router>
      <Link to="/">Home</Link>
      <Link to="/About">About</Link>
      <Routes>
        <Route path={"/"} exact element={<Home />} />
        <Route path={"/About"} exact element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

Code Sandbox

CodePudding user response：

Try this:

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
  return (
    <>
      <Router>
        <Link to="/">Home</Link>
        <Link to="/About">About</Link>

        <Routes>
          <Route index element={<Home />} />
          <Route path="About" element={<About />} />
        </Routes>
      </Router>
    </>
  );
}

export default App;

CodePudding user response：

You need to specify a component in your route.

<Route path="/" component={Home} exact />

Also you need to import route not routes