为什么我的 react-router 链接没有将我带到另一个页面（React JS）？

Question

I have this code inside my App.js and i declared those routes:

function App() {
 return (
<BrowserRouter>
<div className='App'>
  <Switch>
    <Route exact path="/"><Index /></Route>
    <Route exact path="/contact"><Contact /></Route>
  </Switch>
  
</div>
</BrowserRouter>
);
}

export default App;

And then in my Navbar.js i declared this link to /contact:

<Link to={ "/contact" } className="nav-item nav-link">Contact</Link>

And it doesn't work, the url changes into "http://localhost:3000/contact" but it remains in the index page, and the weird thing is that when i type exactly the same url in the url box it takes me to the contact page

Answer 1

Your code wrong it shold be like that: to="/contact"

Answer 2

Syntax error.

You wrote: Link to={ "/contact" } but it will be like: <Link to="/contact">Contact</Link>

I think It will be solved.

Answer 3

Well I would alter the code slightly:

import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <div className='App'>
        <Routes>
          <Route index element={<Index />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
  
      </div>
    </BrowserRouter>
  );
}

export default App;

The link code you have I've altered slightly too:

<Link to="/contact" className="nav-item nav-link">Contact</Link>

That's how we have ours and it is working fine, should be for you too.