为什么 React Link 和 NavLink 不起作用？答案

【问题标题】：Why doesn't work the React Link and NavLink?为什么 React Link 和 NavLink 不起作用？
【发布时间】：2022-01-18 23:33:47
【问题描述】：

我有 main.js 和 Character.js。在 Character.js 中，我希望使用 NavLink 元素，但使用它时出现错误。当我将 NavLink 更改为 div 时，它会呈现在页面上。你能告诉我有什么问题吗？我为此苦苦挣扎了一段时间。谢谢！

import { Routes, Route } from 'react-router-dom';
import { useState, useEffect } from 'react';
import Episodes from '../Episodes/Episodes';
import Characters from '../Characters/Characters';
import Locations from '../Locations/Locations';
import Home from '../Home/Home';

export default function Main() {
  const [characters, setCharacters] = useState([]);
  const [locations, setLocations] = useState([]);
  const [episodes, setEpisodes] = useState([]);

  useEffect(() => {
    (async function () {
      const resp = await fetch('https://rickandmortyapi.com/api/character');
      const data = await resp.json();
      setCharacters(data.results);
    })();
  }, []);

  return (
    <Routes>
      <Route
        path='/episodes'
        element={<Episodes episodes={episodes} />}
      ></Route>
      <Route
        path='/characters'
        element={<Characters list={characters} />}
      ></Route>
      <Route
        path='/locations'
        element={<Locations locations={locations} />}
      ></Route>
      <Route path='/' element={<Home />} />
    </Routes>
  );
}

import './characters.css';
import Character from '../Character/Character';
import { Link, NavLink, Route, Routes } from 'react-router-dom';

export default function Characters({ list }) {
  return (
    <>
      <div className='list'>
        <h2>List of characters</h2>
        {list.length === 0 && <p>No Character</p>}
        {list.map((item, idx) => (
          <div key={item.id}>
            <NavLink>{item.name}</NavLink>
          </div>
        ))}
      </div>
    </>
  );
}

【问题讨论】：

标签： reactjs hyperlink react-router react-router-dom

【解决方案1】：

NavLink 需要通过to 属性指定它所链接的位置。

Link

interface LinkProps
  extends Omit<
    React.AnchorHTMLAttributes<HTMLAnchorElement>,
    "href"
  > {
  replace?: boolean;
  state?: any;
  to: To;                              // <-- required prop!
  reloadDocument?: boolean;
}

NavLink

interface NavLinkProps
  extends Omit<
    LinkProps,                         // <-- extends LinkProps from above
    "className" | "style" | "children"
  > {
  caseSensitive?: boolean;
  children?:
    | React.ReactNode
    | ((props: { isActive: boolean }) => React.ReactNode);
  className?:
    | string
    | ((props: { isActive: boolean }) => string);
  end?: boolean;
  style?:
    | React.CSSProperties
    | ((props: {
        isActive: boolean;
      }) => React.CSSProperties);
}

例子：

<NavLink to={item.path}>{item.name}</NavLink>

【讨论】：

【解决方案2】：

您缺少 NavLink 的“to”道具

<NavLink to="/">{item.name}</NavLink> //or other location

另外，我认为您缺少路由器。

import { Routes, Route, BrowserRouter as Router } from "react-router-dom";


 <Router>
    <Routes>
      <Route
        path='/episodes'
        element={<Episodes episodes={episodes} />}
      ></Route>
      <Route
        path='/characters'
        element={<Characters list={characters} />}
      ></Route>
      <Route
        path='/locations'
        element={<Locations locations={locations} />}
      ></Route>
      <Route path='/' element={<Home />} />
    </Routes>
  </Router>

【讨论】：