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

【问题标题】：Why does my react-router Link not take me to the other page (React JS)?为什么我的 react-router Link 没有将我带到另一个页面（React JS）？
【发布时间】：2022-08-16 16:37:41
【问题描述】：

我的 App.js 中有这段代码，我声明了这些路由：

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;

然后在我的 Navbar.js 中，我将此链接声明为 /contact：

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

而且它不起作用，url 变成了 \"http://localhost:3000/contact\" 但它仍然在索引页面中，奇怪的是当我在 url 框中键入完全相同的 url它带我到联系页面

可以制作问题的沙盒链接
mmm idk 该怎么做对不起
导航栏在哪里？
navbar.js 位于 components 文件夹中，contact.js 位于 pages 文件夹中

标签： javascript reactjs

【解决方案1】：

你的代码错了应该是这样的：to="/contact"

【讨论】：

我也试过了，也没有用
尝试从联系人路由中删除确切的内容，您是否从反应路由器 dom 导入浏览器路由器？
是的，我导入了 Route 并准确删除了它，但它不起作用，它变得更糟

【解决方案2】：

语法错误。

您写道：Link to={ "/contact" } 但它会像：<Link to="/contact">Contact</Link>

我想会解决的。

【讨论】：

不，我也试过了，但仍然没有用
使用路由器版本 6。

【解决方案3】：

好吧，我会稍微改变一下代码：

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;

您拥有的链接代码我也略有更改：

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

这就是我们拥有我们的方式，并且工作正常，也应该适合您。

【讨论】：