我的导航链接在 react.js 中不起作用，但重新加载后它起作用

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.

Answer 1

import Nav from 'react-bootstrap/Nav';

add this line,hope it will work