react-route嵌套路由访问对应URL时返回404 Not Found问题求助

问题排查步骤 #

1. 确认React Router版本 #

你当前用的是React Router v5的API（useRouteMatch、Switch），先检查项目package.json里的react-router-dom版本是否为v5，如果已升级到v6，旧API会失效，需要按v6的嵌套路由规则改写代码。

2. 检查外层路由配置 #

确认App.js里/counsellor对应的Route没有加exact属性，加了exact的话只有完全匹配/counsellor时才会渲染Counsellor组件，/counsellor/profile会直接被外层Switch拦截返回404。你当前贴的代码里这个配置是正确的，可核对实际项目代码是否误加了exact。

3. 修复Laravel后端路由（最可能的原因） #

你使用Laravel+React的技术栈，直接在地址栏访问/counsellor/profile时，请求会先发送到Laravel后端，后端没有定义对应路由就会返回404。需要在Laravel的路由文件routes/web.php最后添加兜底路由，所有未匹配到的路径都返回挂载React的入口页面：

// 放在所有路由的最后面，避免覆盖其他后端路由
Route::view('/{any}', '你的React入口视图名')->where('any', '.*');

配置完成后清理Laravel路由缓存再测试即可。

4. 临时验证方案 #

如果不想改后端路由，可以把App.js里的BrowserRouter换成HashRouter，路径会带#前缀，哈希部分的路径不会发送到后端，也可以解决404问题，不过URL美观度和SEO效果不如BrowserRouter。

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