reactjsreact-routerreact-router-component

Page Not Found is rendered for all paths

I am using React-Router-Dom to route my application. I have a route for /hooks, but when I try to navigate to that route, the PageNotFound component is always rendered. I have tried the following:

Code:

package.json:

    {
      "name": "learnreactjs",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^13.0.0",
        "@testing-library/user-event": "^13.2.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router-dom": "^6.16.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.0"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest"
        ]
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
    }

App.js:

    import { BrowserRouter, Route, Routes } from "react-router-dom";
    import Parent from "./Parent";
    import Hooks from "./Hooks";
    import PageNotFound from "./PageNotFound";
    
    function App() {
      return (
        <BrowserRouter>
          <div>
            <h1>Header from App Component</h1>
            <Routes>
              <Route Path="/" element={<Parent />} />
              <Route Path="hooks" element={<Hooks />} />
              <Route path="*" element={<PageNotFound />} />
            </Routes>
            <h1>Footer from App Component</h1>
          </div>
        </BrowserRouter>
      );
    }
    
    export default App;

Parent.js:

    import React from 'react';
    import Child from './Child';
    
    function Parent() {
        let n = "Test";
        let a = 120;
        return (
            <div>
                <h1>
                    Welcome from Parent Component
                </h1>
    
                <Child name={n} age={a}></Child>
            </div>
        );
    }
    
    export default Parent

Child.js:

    import React from 'react';
    import PropTypes from "prop-types";
    
    function Child(props) {
        return (
            <div>
                <h1>
                    Hello {props.name}, Your Age is {props.age}
                </h1>
            </div>
        );
    }
    
    Child.propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number.isRequired
    };
    
    export default Child

Hooks.js:

    function Hooks() {
        return (
            <h1>
                Hooks
            </h1>
        );
    }
    
    export default Hooks;

PageNotFound.js:



    function PageNotFound() {
        return (
            <p>
                404 - Page Not Found
            </p>
        );
    }
    
    export default PageNotFound;

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Output:

view output here

Solution

  • Changing Path to path (with a lowercase 'p') is the correct way to specify route paths in React Router. Your code should work as expected with the correction.

    Sample code for App.js

    import { BrowserRouter, Route, Routes } from "react-router-dom";
import Parent from "./Parent";
import Hooks from "./Hooks";
import PageNotFound from "./PageNotFound";

function App() {
  return (
    <BrowserRouter>
      <div>
        <h1>Header from App Component</h1>
        <Routes>
          <Route path="/" element={<Parent />} />
          <Route path="hooks" element={<Hooks />} />
          <Route path="*" element={<PageNotFound />} />
        </Routes>
        <h1>Footer from App Component</h1>
      </div>
    </BrowserRouter>
  );
}

export default App;

    here Path is change to path. Hope it works.