我无法从 react-router-dom 导入 Link 属性答案

【问题标题】：I can't import Link attribute from react-router-dom我无法从 react-router-dom 导入 Link 属性
【发布时间】：2022-01-15 13:03:35
【问题描述】：

我尝试从react-router-dom 导入链接，如果找不到该模块，则出现编译错误。然后我单独安装了它。然后得到这个错误。

Uncaught Error: useHref() may be used only in the context of a <Router> component.

我的代码：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import NavBar from './components/navbar';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <NavBar />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

navBar.jsx

import React from "react";
import {Link} from 'react-router-dom';

const NavBar = () => {
  return (
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/products">Products</Link>
      </li>
    </ul>
  );
};

export default NavBar;

products.jsx

import React from "react";

class Products extends React.Component {

  render() {
    return (
      <div>
        <h1>Products</h1>
      </div>
    );
  }
}

export default Products;

【问题讨论】：

标签： javascript reactjs import jsx react-router-dom

【解决方案1】：

在您可以使用链接标签之前，您首先需要创建一个名为 <Routes> (v6) 或 <BrowserRouter> & <Switch> (v5) 的反应路由器父级。在这个父节点中，您可以定义您的路线。

查看此示例：

https://stackblitz.com/github/remix-run/react-router/tree/main/examples/basic?file=src%2FApp.tsx

【讨论】：