The question is published on by Tutorial Guruji team.
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.