react routing gives the blank screen not proper output

user_17625369 0
Viewed 813

I have try to call my routes form App.js file but this is not working properly. I have try many times but browser gets the blank screen. Am totally new to react js Framework

App.js:

import React from 'react';
import { BrowserRouter, Route,Routes} from 'react-router-dom';
import Login from './Components/Login/Login';
function App() {
  return (
    <div className="App">
      
       <BrowserRouter>
          <Routes>
            <Route path="/" exact={true} component={Login}></Route>
            <Route path="/login" exact={true} component={Login}></Route>
          </Routes>
       </BrowserRouter>    
    </div>
  );
}
export default App;

Login Component here:(Login.js)

import React from "react";

const Login = () => {
  return (
    <form>
      <h3>Sign In</h3>

      <div className="form-group">
        <label>Email address</label>
        <input
          type="email"
          className="form-control"
          placeholder="Enter email"
        />
      </div>
    </form>
  );
};
export default Login;
react-router react-hooks reactjs
3 Answers

You should remove <Routes>

in React Router V5 we just have <BrowserRouter> and <Route>

OR also you can do this for importing: BrowserRouter as Router

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

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Login}></Route>
          <Route path="/login" exact={true} component={Login}></Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}
export default App;
user_157376460

try this code snippet.

Change Routes with Switch Statement.

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Login from "./Login";
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Login}></Route>
          <Route path="/login" exact={true} component={Login}></Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}
export default App;
user_155421820

After a day of research, I found the solution and it`s nowhere on the internet. type the following commands in the terminal: npm uninstall react-router-dom (if you installed that way) Or npm uninstall react-router-dom@6 (if you installed that way)

Then install react-router-dom@5 by typing npm install react-router-dom@5 and you would be able to see the components in the browser

user_155397010
Related