React Router 6.8路由不匹配：点击电影无法显示详情

问题分析 #

点击电影名称后出现"unmatched routes"错误，核心原因是路由规则配置不符合React Router 6的嵌套路由逻辑：

• Main组件中/films路由未配置为支持子路径匹配，当访问/films/1这类子路径时，Router无法找到对应的路由规则
• Films组件内的详情路由使用了绝对路径/films/:id，但父路由未预留子路径匹配的规则

修复方案 #

方案一：使用嵌套路由+Outlet（推荐） #

这是React Router 6推荐的嵌套路由写法，结构更清晰：

1. 调整Main.js的路由结构

将电影详情路由作为/films的子路由定义，并传入所需的方法和数据：

import { Routes, Route, useLocation } from "react-router-dom";
import { Films } from "../Films/Films";
import { Person } from "../Person/Person";
import { Film } from "../Film/Film";

export const Main = (props) => {
  const { pathname } = useLocation();

  return (
    <div className="mainContent">
      <Routes>
        <Route path="/films" element={<Films list={props.list} />}>
          {/* 嵌套子路由，使用相对路径":id" */}
          <Route path=":id" element={<Film findFilm={props.findFilm} />} />
        </Route>
        <Route path="/planets" element={<Planets />}></Route>

        <Route path="/people" element={<People list={people} />}>
          <Route path="/people/:id" element={<Person list={people} />} />
        </Route>
      </Routes>
    </div>
  );
};

2. 修改Films.js，用Outlet渲染详情组件

移除Films内部的Routes，改用Outlet来承载嵌套的电影详情组件，同时把NavLink的路径改为相对路径：

import React from "react";
import { NavLink, Outlet } from "react-router-dom";
import "./films.css";

export const Films = ({ list }) => {
  return (
    <>
      <div className="results">
        <h2>Film List</h2>

        {list.length === 0 && <p>No films...</p>}
        {list.map((film, index) => (
          <p key={film.title}>
            <NavLink
              to={`${index + 1}`}
              className={({ isActive }) => (isActive ? "activeLink" : "none")}
            >
              {film.title}
            </NavLink>
          </p>
        ))}
      </div>

      <div className="details">
        {/* 用Outlet渲染嵌套的Film组件 */}
        <Outlet />
      </div>
    </>
  );
};

方案二：调整路由路径为相对路径 #

如果不想重构为嵌套路由，也可以通过修改路径规则解决：

1. 修改Main.js的/films路由

将路径改为/films/*，允许匹配所有/films下的子路径：

<Route path="/films/*" element={<Films list={props.list} findFilm={props.findFilm} />}></Route>

2. 调整Films.js的路由和链接路径

把详情路由改为相对路径:id，同时更新NavLink的路径：

import React from "react";
import { NavLink, Route, Routes } from "react-router-dom";
import { Film } from "../Film/Film";
import "./films.css";

export const Films = ({ list, findFilm }) => {
  return (
    <>
      <div className="results">
        <h2>Film List</h2>

        {list.length === 0 && <p>No films...</p>}
        {list.map((film, index) => (
          <p key={film.title}>
            <NavLink
              to={`${index + 1}`}
              className={({ isActive }) => (isActive ? "activeLink" : "none")}
            >
              {film.title}
            </NavLink>
          </p>
        ))}
      </div>

      <div className="details">
        <Routes>
          {/* 使用相对路径":id" */}
          <Route path=":id" element={<Film findFilm={findFilm} />} />
        </Routes>
      </div>
    </>
  );
};

额外注意事项 #

• 确保list和findFilm方法已正确从父组件传入Films组件
• 检查findFilm函数的逻辑：如果API返回的电影id不是从1开始的索引（比如是API自带的唯一id），要把index + 1改为电影的真实id，避免查找错误

内容的提问来源于stack exchange，提问作者Iram Kahkashan