Issue with React Router - Tutorial Guruji

I’m using react-router-dom but my routes are somehow not working. the routes are not redirected to the component. I don’t have any error in the console, and I did npm install react-router-dom. I can’t see what I’ve done wrong. You can find my code below. Any help will be welcome.

This is my App.js page

import React from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route
  
} from "react-router-dom";

import LoginButton from './components/LoginButton';
import Register from './components/Register';
import Login from './components/Login';

function App() {
  return (
   

    <Router>
      <div>
    <div className="cover d-flex justify-content-center align-items-center">
    <div className="text-white">
    <h1 className="text-center fw-bold">GREEN</h1>
    <p className="lead fw-bold">CARBON FOOTPRINT CALCULATOR</p>
    <LoginButton />
    </div>
   
    </div>

   <Switch>

   <Route path="/register">
     <Register />
  </Route>

         <Route path="/login">
           <Login />
         </Route>

         <Route path="/">
           <App />
         </Route>



   </Switch>
   
    </div>
    </Router>
  );
}

export default App;

This is the component page

import React, { Component } from 'react';
import './LoginButton.css'
import { Link } from "react-router-dom";

export default class LoginButton extends Component {
    render() {
        return (
            <div>
                 <div className="login-container">
            <Link to="/register"><button className="signup-button">SIGN UP</button></Link>
            
            <Link to='/login'><button className="login-button">LOG IN</button></Link>
        </div>
            </div>
        )
    }
}

Answer

assuming you know the difference between import {component} from component and import component from component. In my example below I’m using the import {component} from component;.

The React Router works something like this:

<Router>
<div>    
<div className="cover d-flex justify-content-center align-items-center">
    <div className="text-white">
    <h1 className="text-center fw-bold">GREEN</h1>
    <p className="lead fw-bold">CARBON FOOTPRINT CALCULATOR</p>
 <LoginButton />
</div>
<Switch>
       <Route path='/' component={Home} exact />
       <Route path='/register' component={Register} exact />
       <Route path='/login' component={Login} exact />
</Switch>

Edit:

You’re using <Route path="/"> <App /> </Route> which is the entry point itself in App.js. You’ve a syntax error in your App.js file.