CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
Renta
Renta

Reputation: 65

Page Not Found Component displaying on all pages?

I have just about completed my first real React JS project except for one bug. My 404/Page Not Found component is displaying on all pages. I have looked all over the internet and through multiple similar questions here on SO, but I am still at a loss of how to fix this problem. Here is the relevant code (with parts irrelevant to the issue removed; I can provide more code if it is necessary):

Module imports:

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

State/login functions/authorized pages route guards here:

  render() {
    return (
      <div>
        <Router history={history} >
          <Switch>
            <Route render={(props) => (<HeaderNavbar {...props} handleLogin={this.handleLogin} handleLogout={this.handleLogout} loggedInStatus={this.state.loggedInStatus} role={this.state.role} key="header"/>)}/>
            <Route exact path="/" component={TitlePage} />
            <Route exact path="/register" component={Register} />
            <Route exact path="/login" render={(props) => (<Login {...props} handleLogin={this.handleLogin} key="login" />)}/>
              {this.state.role === "Student" ? (
                this.studentAuthorizedPages()) :
                null}
            <Route exact path="/profile" component={UserProfile} />
              {this.state.role === "Instructor" ? (
                this.instructorAuthorizedPages()) :
                null}
              {this.state.role === "Administrator" ? (
                this.adminAuthorizedPages()) :
                null}
            <Route component={PageNotFound} />
            {/* <Route path='/404' component={PageNotFound} />
            <Redirect to="/404" /> */}
          </Switch>
        </Router>
      </div>
    );
  }
}

I believe this issue has something to do with {Switch}'s direct parent-child requirement, but I'm not sure.

So far I have tried:

  1. Adding additional <Switch></Switch> around other parts of the code inside <Switch>. I tried this to see if it was a parent-child issue; but the bug remained.

  2. Removing the line with HeaderNavbar in it.

  3. Writing the {PageNotFound} route as either of the following:

Route path="*" component={PageNotFound} 
Route path="" component={PageNotFound}
  1. Using a Redirect statement (as is commented out in the code above). This prevented the app from displaying the {PageNotFound} component on every page, but then the app routed to the {PageNotFound} component on initial load, any page refresh or when a user logs out (which makes sense because logging out Routes the user back to the title page; hence basically the same as an initial load).

These are the main approaches I have tried in addition to some other smaller changes which didn't amount to anything.

I am using:

React 16.13.1 React-Router 5.1.2

Any help would be greatly appreciated.

Upvotes: 0

Views: 742

Answers (1)

Alex Tom
Alex Tom

Reputation: 221

You messed up with Switch, BrowserRouter and Router: Change

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

to

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

according to this pattern:

<Router> // or BrowserRouter
    <Switch>
        <Route path="/about">
            <About />
        </Route>
        <Route path="/topics">
            <Topics />
        </Route>
        <Route path="/">
            <Home />
        </Route>
    </Switch>
</Router>

see here

If you want to use history prop, change BrowserRouter to just Router. Docs:

import { Router, Route, Switch } from "react-router-dom";

Upvotes: 2

Related Questions