react-router-dom 最新版本上的导航链接不起作用答案

【问题标题】：Nav Link on react-router-dom latest version is not workingreact-router-dom 最新版本上的导航链接不起作用
【发布时间】：2022-10-23 04:20:12
【问题描述】：

我是新来的反应。我猜我认为 NavLink 在 react router dom 最新版本中不再起作用。请问什么可以代替NavLink？提前谢谢你我知道这是一个重复的问题，但这些解决方案都不适合我，所以我尝试发布问题。

顺便说一句，当我尝试运行反应应用程序时，发生的错误是这样的。 “错误：useLocation() 只能在路由器组件的上下文中使用。”

import React from "react";
import { NavLink } from "react-router-dom";


export default function navbar() {
  return (
    <nav className="navbar navbar-expand-lg">
      <a className="navbar-brand">Hotel Booking App</a>
      <button
        className="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span className="navbar-toggler-icon"></span>
      </button>

      <div className="collapse navbar-collapse" id="navbarNav">
        <ul className="navbar-nav">
          <li className="nav-item active">
          <NavLink className="nav-link" to="/Register">
            Register
          </NavLink>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="/login">
              Login
            </a>
          </li>
        </ul>
      </div>
    </nav>
  );
}

【问题讨论】：

标签： reactjs

【解决方案1】：

您已导入并使用导航链接正确。必须在您的应用程序中定义路由才能使用导航链接.我不确定您是否为您的应用程序定义了路由。您可以通过这种方式定义您的路线：

import React, { Component } from 'react';
import Test_1 from './components/Test_1';
import Test_2 from './components/Test_2';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
class App extends Component {
  render() {
    return (
      <Router>
        <Routes>
          <Route path='/' element={<Test_1 />} />
          <Route path='/home' element={<Test_2 />} />
        </Routes>
      </Router>
    );
  }
}

export default App;

【讨论】：

好的，我稍后再试试，谢谢你的时间:)

【解决方案2】：

要解决此问题，您需要使用 BrowserRouter 将组件包装在顶层

【讨论】：