My navlink is not working in react.js but after reloading it works

Question

Developing a react.js app. Used nav link at navbar. The router is also defined but it doesn't go anywhere. after reloading it works. If Job Post is clicked on Navbar it doesn't work but in the URL it's http://localhost:3000/jobPost and after reloading it is routed. App package.json is

"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.34.0",
"react-router-dom": "^5.3.0",

import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Offcanvas from 'react-bootstrap/Offcanvas';
import { Link } from 'react-router-dom';

<Nav className="justify-content-end flex-grow-1 pe-3">
<Nav.Link as={Link} to="/home">Home</Nav.Link>
<Nav.Link as={Link} to="/jobPost">job Post</Nav.Link>
<NavDropdown title="Dropdown" id={`offcanvasNavbarDropdown-expand-${expand}`}>
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
... ... ...
<NavDropdown.Divider />

In App.js

<Route exact path="/">
      <Home></Home>
</Route>

<Route path="/home">
        <Home></Home>
</Route>

<Route path="/jobPost">
        <JobPost></JobPost>
</Route>

Need some help.

score 0 · Accepted Answer · answered Aug 08 '22 at 05:00

0

import Nav from 'react-bootstrap/Nav';

add this line,hope it will work

answered Aug 08 '22 at 05:00

Ashik Rana

47
3

Added now ```import Nav from 'react-bootstrap/Nav';``` but same result. It works only after reloading. – R. Mahbub Aug 08 '22 at 05:46
use react-router-dom@v6, it works well in my project – Ashik Rana Aug 08 '22 at 05:50
It's still not working yet[Installed react-router-dom@v6]. – R. Mahbub Aug 08 '22 at 08:22
OP is using RRDv5, so the fact you are using v6 and works differently is completely irrelevant. – Drew Reese Aug 08 '22 at 15:26
It works:: in App.js ``` } /> } />``` and in Navbar.js ``` Post Job``` Thanks all. – R. Mahbub Aug 13 '22 at 04:41

My navlink is not working in react.js but after reloading it works

1 Answers1