使用Spring Boot搭配React时出现No route match location错误的原因咨询

结合你提供的代码，以下是触发该错误的核心原因及对应解决方式：

1. React Router嵌套路由路径配置冲突 #

在React Router v6中，嵌套路由的子路由若以/开头会被视为绝对路径，和父路由path="/"的配置产生冲突。正确的嵌套子路由应使用相对路径，去掉开头的/：

<Routes>
  <Route path="/" element={<Layout/>}>
    {/* 子路由用空字符串匹配父路由的根路径 */}
    <Route path="" element={<Home movies={movies} />} ></Route>
    {/* 相对路径，最终匹配/Trailer/:ytTrailerId */}
    <Route path="Trailer/:ytTrailerId" element={<Trailer/>}></Route>
  </Route>
</Routes>

2. Spring Boot未配置SPA路由转发 #

React是单页应用，所有前端路由需由React Router处理。若直接在地址栏输入/Trailer/xxx或刷新页面，请求会先发送到Spring Boot后端：

• Spring Boot找不到对应后端接口/静态资源，返回404
• React应用未加载完成，无法捕获路径，进而抛出路由不匹配错误

需在Spring Boot中配置转发规则，将所有前端路由请求转发到React的index.html：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/**")
               .setViewName("forward:/index.html");
    }
}

注意：确保React打包后的静态文件（含index.html）已放在Spring Boot的src/main/resources/static目录下。

3. 跳转方式不符合SPA规范 #

若跳转/Trailer/:ytTrailerId时使用原生<a>标签，而非React Router提供的<Link>或useNavigate：

• <a>标签会触发页面刷新，请求直接发送到后端，无法被React Router处理
• 导致路由匹配失败

正确跳转方式：
使用<Link>组件：

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

<Link to={`/Trailer/${movie.trailerId}`}>查看预告片</Link>

或使用useNavigate钩子：

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
navigate(`/Trailer/${movie.trailerId}`);

4. 路径拼写或参数错误 #

若跳转时路径拼写错误（比如小写/trailer/xxx和配置的大写/Trailer/:ytTrailerId不匹配），或传递的ytTrailerId为空，也会导致路由无法匹配。

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