CODEWITHSUNDEEP
javascriptreactjs
Joshua Cushing
Joshua Cushing

Reputation: 73

Why is React Router taking me to the correct path, but not displaying the corresponding component?

I'm working on creating a contact list with React. For this particular project, I am supposed to create it without using Redux.

I'm trying to use React Router to navigate to a child component. When I do so, it takes me to the desired URL path (http://localhost:3000/diplayed-list), but the component itself is not displaying in the UI, nor is it showing up in the components section of my dev tools.

Here is the parent component:

import { Link, Routes, Route } from "react-router-dom";
import DisplayedList from "./DisplayedList";

const AddContact = () => {

  return (
    <form>
      <div className="form-group">
        <label htmlFor="full-name">Full Name:</label>
        <input type="text" className="form-control" id="full-name" />
      </div>
      <div className="form-group">
        <label htmlFor="email">Email:</label>
        <input type="email" className="form-control" id="email" />
      </div>
      <div className="form-group">
        <label htmlFor="phone-number">Phone Number:</label>
        <input type="text" className="form-control" id="phone-number" />
      </div>
      <div className="form-group">
        <label htmlFor="image">Image:</label>
        <input type="text" className="form-control" id="image" />
      </div>
      <Link to="/diplayed-list">
        <button type="button" className="btn btn-secondary">Go Back</button>
      </Link>
      <Link to="/diplayed-list">
        <button type="submit" className="btn btn-primary">Submit</button>
      </Link>
      <Routes>
        <Route path="/diplayed-list" element={<DisplayedList />}></Route>
      </Routes>
    </form>
  )
}

export default AddContact;

Here is the child component:

const DisplayedList = () => {
  return (
    <div>
      <p>Testing 1, 2, 3</p>
    </div>
  )
   
};

export default DisplayedList;

It is working properly one component layer up, passing from App.js to AddContact.js:

import React from 'react';
import { 
  Routes, 
  Route, 
  Link } from 'react-router-dom';
import AddContact from './components/AddContact';

    const App = () => {
    
      return (
        <div className='container'>
          <div className='row'>
            <div className='col-12'>
              <h1>React Contact List</h1>
            </div>
          </div> 
          <div className='row'>
            <div className='col'>
              <Link to="/add-contact/*">
                <button id='add-contact-btn' className='btn btn-primary'>Add Contact</button>
              </Link>
            </div>
          </div>
          <Routes>
            <Route path="/add-contact/*" element={<AddContact />}></Route>
          </Routes>
        </div>
      )
    }
    
    export default App;

Here are the dependencies in my package.json, in case anyone can catch any issues there. I did, at one point, do an npm i react-router-dom@latest --force at one point. I'm not sure if I messed anything up in my dependencies.

{
  "name": "contact-list",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^5.1.3",
    "react": "^18.1.0",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.1"
  },

I'm not sure why it's not working in the first code example.

I did try commenting out one of the links to "/displayed-list", just to be sure having to links to the same place wasn't jamming it up. I still had the same problem.

I saw, from another post on a similar question, that failing to use exact path= when you have a path that is simply path="/".

I changed my index.js to have an exact path=, but that didn't seem to make a difference either. Here is the code for that:

import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route exact path="/*" element={ <App /> }>
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

I tried making "/displayed-list" in AddContact.js an exact path=, but that didn't seem to fix it either.

I also tried component= instead of element=, but that didn't seem to make a difference either.

Can anyone catch what I'm missing?

Upvotes: 1

Views: 236

Answers (2)

Ilan Rosenbaum
Ilan Rosenbaum

Reputation: 189

Unless I'm missing something it seems you never set a route to that address in your App.js file. All routes should be set there to route properly.

I'd try moving

<Routes>
  <Route path="/diplayed-list" element={<DisplayedList />}></Route>
</Routes>

In the App.js file you should replace

<Routes>
   <Route path="/add-contact/*" element={<AddContact />}></Route>
</Routes>

With:

<Routes>
   <Route path="/add-contact/*" element={<AddContact />}></Route>
   <Route path="/diplayed-list" element={<DisplayedList />}></Route>
</Routes>

Upvotes: 0

Osmanys Fuentes-Lomb&#225;
Osmanys Fuentes-Lomb&#225;

Reputation: 863

Try this:

import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import App from './App';
import AddContact from './components/AddContact';


ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/">
           <Route index element={ <App /> }/>
           <Route path="add-contact" element={ <AddContact /> }/>
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

Remove the Route inside App.js, all your Route must be inside just one Routes (the one in the index.js). Also note how you must declare child routes

Upvotes: 3

Related Questions