0

I want to send my user to the login page from the main page after they click login button. But the react router dom's Link is not working and it is not redirecting to the login page.

Having issue with :

 <Link to="/login">Login</Link>

The App.js code as well as the main page code are attached below. So please help me out.

App.js code :

import React, { Component } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Provider } from 'react-redux';
import store from './store';
import AppNavbar from './components/appNavbar';
import Login from './components/login';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import FacultyMain from "./components/facultyMain";

class App extends Component{
    render() {
        return (
            <Provider store={store} >
                <AppNavbar />
                <BrowserRouter>
                    <Switch>
                        <Route path='/' component={FacultyMain} />
                        <Route path='/login' component={Login} />
                    </Switch>
                </BrowserRouter>
            </Provider>
        );
    }
}

export default App;

The page where the link is :

import React, { Component } from 'react';
import {
  Card, CardImg, CardText, CardBody,
  CardTitle, CardSubtitle, Button
} from 'reactstrap';
import image from '../logo.jpeg';
import { Link } from 'react-router-dom';

class FacultyMain extends Component {
    render() {
        return (
            <div>
                <Link to="/login">Login</Link>
            </div>
        );
    }
};

export default FacultyMain;

package.json :

{
  "name": "virtual-lab",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.0",
    "bootstrap": "^4.5.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "reactstrap": "^8.7.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "redux-devtools-extension": "^2.13.8"
  }
}
Bhagyaraj Haranale
  • 13
  • 6

1 Answers1

0

The problem was with the '/' path. Using exact solved it

<Route exact path='/' component={FacultyMain} />
Bhagyaraj Haranale
  • 13
  • 6