Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Issue with React Router without wasting too much if your time.
The question is published on by Tutorial Guruji team.
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.
We are here to answer your question about Issue with React Router - If you find the proper solution, please don't forgot to share this with your team members.