I have the main.js and Character.js. In the Character.js I want the to use NavLink element, but I got errors when I use it. When I change the NavLink to div, then it renders on the page. Can you tell me what is the problem? I'm struggling with that for a while. Thanks!

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>
    </>
  );
}

CodePudding user response：

The NavLink needs to specify where it's linking to, via the to prop.

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);
}

Example:

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

CodePudding user response：

Your missing the "to" prop of the NavLink

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

Additionally I think you are missing a Router.

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>