React App loads HomePage instead of Desired Page

user_11879492 0
Viewed 710

I'm very new to React and Web Developing so please bear with me a little.

I'm building a simple web application with react and flask. I thought I could use the code from the Users.js file as a base to develop a registerUser.js script, as I needed some parts of the code. I had done this with a previous script, just changing the declaration accordingly( exp: export const ClassName = () => { } )

But it loads homepage instead. I thought maybe there was a mistake keeping it from loading correctly but I deleted all info and left just some text in yet it won't load this page (registeruser.js) and load homepage instead.

What could be keeping it from loading? I checked the browser and the address is correct (http://localhost:3000/registerUser)

this is my current code that wont load:

import React, { useState, useEffect, useRef, Fragment } from "react";

const API = process.env.REACT_APP_API;

export const RegisterUser = () => (
 <Fragment>
   <div className="row">
     <h1>TEST TEXT</h1>
   </div>
   <div className="row">
     <br></br>
   </div>
   <div className="row">
     <h3>PLEASE LOAD</h3>
   </div>
 </Fragment>
 );

And I'm loading the code from the navbar

import React from 'react'
import {Link} from 'react-router-dom'

export const Navbar = () => (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
    <Link className="navbar-brand" to="/">POLL ME APP</Link>
    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon" />
    </button>
    
    <div className="collapse navbar-collapse" id="navbarNav">
      <ul className="navbar-nav">
        <li className="nav-item">
          <Link className="nav-link" to="/registerUser">Register</Link>
        </li>
      </ul>
    </div>
    //other links

And it is declared in the App.js

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


 //other imports
import { Registers } from "./components/Registers";

function App() {
 return (
    <Router>
      <Navbar />
      <div className="container p-4">
        <Switch>
          //other components
          <Route path="/RegisterUser" component={RegisterUser} />
        </Switch>
      </div>
    </Router>
  );
}


export default App;
react-router-dom reactjs javascript
2 Answers

Issue

When using the Switch component the route path order and specificity matter. I suspect you are rendering your homepage into a less specific path, like "/" and it is seen above the more specific path "/RegisterUser".

<Router>
  <Navbar />
  <div className="container p-4">
    <Switch>
      <Route path="/" component={HomePage} />
      //other components
      <Route path="/RegisterUser" component={RegisterUser} />
    </Switch>
  </div>
</Router>

The Switch component returns and renders the first match it finds and path "/" is a path prefix for all paths so if it is found before a path you really want rendered it will instead be the one returned.

Solution

Order paths from more specific to less specific to give them a chance to be matched and rendered first.

<Router>
  <Navbar />
  <div className="container p-4">
    <Switch>
      //other components
      <Route path="/RegisterUser" component={RegisterUser} />
      <Route path="/" component={HomePage} />
    </Switch>
  </div>
</Router>
user_86908570

The issue is arising because the path of your homepage is path="/". Your other routes (eg: path="RegisterUser") start with the same base path and hence the router is also loading the homepage.

To rectify this, you can include "exact" in your homepage.

Eg: Route exact path="/" component={HomePage}

This will differentiate with the other paths, and RegisterUser will load just fine then.

user_102763230
Related