CODEWITHSUNDEEP
reactjs
Peter Boomsma
Peter Boomsma

Reputation: 9844

React Router not loading component on route

I'm trying to navigate to a link /login, when I click the actual link I can see the url change in the browser but the Login component isn't loaded:

// App.tsx

import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';

import Header from './components/Header/Header';
import Login from './components/Login/Login';

const App = () => {
  return (
    <React.Fragment>
      <Header />
      <Router>
        <Route path="/login" exact component={Login} />
      </Router>
    </React.Fragment>
  );
};

export default App;

// Header.tsx

import React from 'react';
import {BrowserRouter, Link} from 'react-router-dom';

const Header = () => {
  return (
    <BrowserRouter>
      <Link to="/login">login</Link>
    </BrowserRouter>
  );
};

export default Header;

And the actual login component:

// Login.tsx

import React from 'react';
// import {useHistory} from 'react-router-dom';

const Login = () => {
  console.log('login component opened');
  return (
    <div>
      Login
    </div>
  );
};

export default Login;

When I click the link in the header component I get navigated to http://localhost:8080/login but the component isn't loading. Also if I refresh that page http://localhost:8080/login I get a message:

Cannot GET /login

Upvotes: 0

Views: 417

Answers (3)

Sebastian MB
Sebastian MB

Reputation: 31

Inside App.tsx your import shouldn't look like this:

import Login from './components/Login/login';

It should be like this instead:

import Login from './components/Login/Login';

You used a wrong file name for the Login component. The first letter must be uppercase.

Upvotes: 0

Nikunj Prajapati
Nikunj Prajapati

Reputation: 11

Try this

const Header = () => {
  return (
    <BrowserRouter>
      <Link to="/login">login</Link>
      <Switch>
          <Route exact path="/login">
              <Login />
          </Route>
      </Switch>
    </BrowserRouter>
  );
};

Upvotes: 1

Ryan Le
Ryan Le

Reputation: 8422

First, the Link component needs to be inside BrowserRouter 

const App = () => {
  return (
    <React.Fragment>
      <Router>
        <Header />
        <Route path="/login" exact component={Login} />
      </Router>
    </React.Fragment>
  );
};

Also, you don't need to wrap BrowserRouter around Link component:

import React from 'react';
import {BrowserRouter, Link} from 'react-router-dom';

const Header = () => {
  return (
      <Link to="/login">login</Link>
  );
};

export default Header;

Upvotes: 1

Related Questions