React- router is not routing

Question

I am using react router to route the pages. However they dont route even when url changes.

index.js File -

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js File -

import "./App.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Nav from "./components/nav.js";
import { Routes } from "react-router";
import social from "./components/social";


function App() {
  return (
    <Router>
      <Nav />
      <div className="container">
        <Switch>
          <Route path="/about" Component={social} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

nav.js file -

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

import '../nav.css';
import Social from "./social";


export default function Nav() {
  return (
    
      <nav className="nav">
      <div>
        <img src={"./assets/LLL.png"} className="logo" />
      </div>
      <div className="navlist">
          <Link to="/" className="nav-item">TWITTER</Link>
          <Link to="/about" className="nav-item">FACEBOOK</Link>
          <Link to="/youtube" className="nav-item">YOUTUBE</Link>
        
      </div>
      <div>
        <button className="login">Login</button>
      </div>
      
    </nav>

    




    
  );
}

social.js file -

import React from 'react'
import '../social.css';

const social = () => {
  return (
    <div className='social'>social</div>
  )
}

export default social

The version in my json file is

"react-router-dom": "^5.2.0",

I had already downloaded v6 too so i even tried by updating the version in json to

"react-router-dom": "^6.11.0",

It did not work so i went back to 5.2v

Just to get to error I have also tried something like this:

import "./App.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Nav from "./components/nav.js";
import { Routes } from "react-router";
import social from "./components/social";

function App() {
  return (
    <Router>
      <Nav />
      <div className="container">
      <Link to="/aaa" className="nav-item">AAA</Link>
        <Switch>
          <Route path="/about" Component={social} />
          <Route path="/aaa" Component={social} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

However the path '/aaa' to wont render the component social.

Just to make more throw checks I have also tried something like - index.js -

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />

    </BrowserRouter>
  
  </React.StrictMode>
);

and wraping the app.js in div yet it wont work. Any help on what might be going wrong would be very greatfull.

Answer 1

The issue is with the usage of the Component prop in your component. It should be component (lowercase "c"). Change the following lines in your App.js file:

From:

<Route path="/about" Component={social} />
<Route path="/aaa" Component={social} />

To:

<Route path="/about" component={social} />

Here's the corrected App.js:

    import "./App.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Nav from "./components/nav.js";
import { Routes } from "react-router";
import social from "./components/social";

function App() {
  return (
    <Router>
      <Nav />
      <div className="container">
        <Switch>
          <Route path="/about" component={social} />
          <Route path="/aaa" component={social} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;