'Link to' in my React Router is not working

Question

I am having problems routing my React app using the 'Link to'. I have gone through all of my code and I just can not find any errors. The path is updating well but it is not routing to the page and is just stuck on same page.

This is the Navbar.js component:

import { Link } from "react-router-dom";

const Navbar = () => {
    return (
        <nav className="navbar">
            <h1>The Mane Blog</h1>
            <div className="links">
                <Link to="/">Home</Link>
                <Link to="/create">New Blog</Link>
            </div>

        </nav>
    );
}
 
export default Navbar

This is the App.js component

import React from 'react';
import Navbar from './Navbar';
import Home from './Home';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Create from './Create';

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          <Switch>
            <Route exact path='/'>
              <Home />
            </Route>
            <Route path='/Create'>
              <Create />
            </Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

export default App;

This is my package.json

{
  "name": "router",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^5.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

When I replace "Link to" with anchor tags, like this:

<a href="/">Home</a>
<a href="/create">New Blog</a>

it works fine. I just don't know what is wrong.

Answer 1

If you use react-router latest version. You can easily route to go one page to another. You need to change the part

<Switch>
    <Route exact path='/'>
        <Home />
     </Route>
     <Route path='/Create'>
       <Create />
     </Route>
</Switch>

and add this code

<BrowserRouter>
  <div className="App">
    <Navbar />
    <div className="content">
      <Router>
        <Route path='/' element={<Home />} />
         <Route path='/Create' element={<Create />} />
      </Router>
    </div>
  </div>
</BrowserRouter>

and Router import from 'react-router-dom'

import {BrowserRouter ,Router, Route, Switch} from 'react-router-dom';