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:
I have checked the console for any error messages, but there are none.
I have tried accessing the
/hooksroute in a different browser, but the problem persists.
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();
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
here Path is change to path. Hope it works.