React router doesn't work (Maybe a conflict with Babel)

Question

I tried to build a really simple ReactJS router but it doesn't work when I access my localhost:8080/login URL.

Here is my App.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/style.css';
import { Route, BrowserRouter, Switch } from "react-router-dom";
import Login from "./Pages/Landing/Login.js";

function App() {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/login" exact component={Login} />
            </Switch>
        </BrowserRouter>
    );
}

ReactDOM.render(<App />, document.getElementById('app'));

I think this may come from the fact that I also use Babel in my project so it may creates conflicts but nothing shows in my VS Code terminal or even my devTools console.

Here is a part of my package.json file:

"scripts": {
    "start": "webpack --mode=development",
    "build": "webpack --mode=production",
    "dev": "webpack-dev-server"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "style-loader": "^3.2.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.1"
  }

This is my index.html file:

<!DOCTYPE html>

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>

<body>
    <div id="app"></div>

    <script src="./bundle.js"></script>
</body>

</html>

My browser returns "Cannot GET /login" but there aren't any console errors and my router only works for the "/" path.

Could anyone help me with that problem?

Answer 1

You have to do import {BrowserRouter as Router,Switch,Link} from react-router-dom

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

Answer 2

Create also a simple component called "Homepage" (this is optional).
If at the end, it doesn't work, try to re-create your app without ReactDom.
One last thing, it will be better to not use long folder paths for simple projects. You can bundle all your components in the same folder.

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/style.css';
import { Route, BrowserRouter, Switch, Link } from "react-router-dom";
import Login from "./Pages/Landing/Login.js";
import Home from "./Home"

function App() {
    return (
        <BrowserRouter>
          <div>
            <Switch>
                <Route exact path="/login"> <Login/> </Route>
                <Route exact path="/"> <Home/> </Route>
            </Switch>
            <Link to="/login"> Login Page </Link>
            <Link to="/"> Homepage </Link>
          </div>
        </BrowserRouter>
    );
}

ReactDOM.render(<App />, document.getElementById('app'));

React router doesn't work (Maybe a conflict with Babel)

Question

2 answers

solution1
0 2021-09-04 10:48:50

solution2
0 2021-09-26 13:29:04

React router doesn't work (Maybe a conflict with Babel)

Question

2 answers

solution1 0 2021-09-04 10:48:50

solution2 0 2021-09-26 13:29:04

solution1
0 2021-09-04 10:48:50

solution2
0 2021-09-26 13:29:04