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

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?

CodePudding user response：

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

CodePudding user response：

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>