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;

capitalization matters. path="/About" and to="/about" have different capitalization so the router does not find the it. Use either 'about' or 'About'. — Szabó Sebestyén, May 18 '22 at 11:47

score 1 · Answer 1 · answered May 18 '22 at 11:46

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;

Eduards · Accepted Answer · 2022-05-18T11:55:53.153

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>

score 0 · Answer 3 · answered May 18 '22 at 11:46

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

react router dom not working when changing the path

3 Answers3