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

Question

我试图从 react-router-dom 导入 Link，但如果找不到该模块，则会出现编译错误。然后我单独安装了它。然后就报错了。

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;

Answer 1

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

查看此示例：

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

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

I can't import Link attribute from react-router-dom

javascript

import

jsx

reactjs

react-router-dom