react router dom not working when changing the path

Question

I am trying to use the router in react but I get nothing when changing the path, you can check the code here Link ..............................

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

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

export default App;

import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";

function Layout({ children }) {
  return (
    <div>
      <Router>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </Router>
      <div>{children}</div>
    </div>
  );
}

export default Layout;

Answer 1

Place the <div>{children}</div> inside <Router>, then in app.js remove Router. Because that has already been declared in <Layout>

Layout.js

import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";

function Layout({ children }) {
  return (
    <div>
      <Router>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>

        <div>{children}</div>
      </Router>
    </div>
  );
}

export default Layout;

App.js

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

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

export default App;

Your current code will output the following:

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

  {/* Children (App.js) */}
   <Router>
    <Routes>
      <Route exact path="/" element={<Home />} />
      <Route path="/About" element={<About />} />
    </Routes>
  </Router>
 {/* Children (App.js) */}
</div>

You don't need two instances of <Router>.

This how it should be:

  <Router>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    
    {/* Children (App.js) */}
     <Routes>
      <Route exact path="/" element={<Home />} />
      <Route path="/About" element={<About />} />
    </Routes>
    {/* Children (App.js) */}
  </Router>

Answer 2

you need to remove Router from your route wrap

import React from "react"; import Layout from "./Layout"; import Home from "./Home"; import About from "./About"; import { BrowserRouter as Routes, Route } from "react-router-dom";

function App() { return (

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/About" element={<About />} />
</Routes>

); }

export default App;

Answer 3

The Problem is, that you have two different Routers in your Application.

You need to move the Layout Component inside your Routercomponent in App.js

And then delete the second router inside of Layout.

More info here: Error: useHref() may be used only in the context of a <Router> component. It works when I directly put the url as localhost:3000/experiences