部署在Netlify的React应用嵌套路由无法正常工作

问题详情 #

我将React应用部署在main--fascinating-melba-bd8f4d.netlify.app，使用react-router-dom实现的嵌套路由出现异常：这些子路由本该仅对登录用户开放，但在Netlify上完全无法正常工作：

• 本地开发环境中，登录后可正常访问localhost:3000/private/my-profile和localhost:3000/private/sell-something
• Netlify部署后，已登录用户访问对应URL时，MyProfile和Sell组件不渲染；未登录用户访问时，也不会跳转到登录页面
• 已在public/_redirects文件中配置/* /index.html 200，其他路由功能正常，仅嵌套路由出问题

相关代码 #

路由配置

<Route path='/private' element={<Auth />}>
  <Route path='/private/my-profile' element={<MyProfile />} />
  <Route path='/private/sell-something' element={<Sell />} />
</Route>

Auth组件（Auth.js）

import { Navigate, Outlet } from 'react-router-dom';
import { useUser } from '../lib/useUser';

export const Auth = () => {
  const user = useUser();

  if (!user) return <Navigate to='/login' />;

  return <Outlet />;
};

useUser.js

import { useState, useEffect } from 'react';
import { useToken } from './useToken';

export const useUser = () => {
  const [token] = useToken();

  const getPayloadFromToken = (token) => {
    const encodedPayload = token.split('.')[1];
    return JSON.parse(atob(encodedPayload));
  };

  const [user, setUser] = useState(() => {
    if (!token) return null;
    return getPayloadFromToken(token);
  });

  useEffect(() => {
    if (!token) setUser(null);
    else setUser(getPayloadFromToken(token));
  }, [token]);

  return user;
};

useToken.js

import { useState } from 'react';

export const useToken = () => {
  const [token, setTokenInternal] = useState(() => {
    return localStorage.getItem('token');
  });

  const setToken = (newToken) => {
    localStorage.setItem('token', newToken);
    setTokenInternal(newToken);
  };

  return [token, setToken];
};

解决方案 #

1. 修正嵌套路由路径写法 #

React Router 6的嵌套路由子路由需使用相对路径，无需重复父路由的/private前缀，否则会被识别为独立路由，无法匹配到父路由的Auth组件：

<Route path='/private' element={<Auth />}>
  {/* 使用相对路径，去掉/private前缀 */}
  <Route path='my-profile' element={<MyProfile />} />
  <Route path='sell-something' element={<Sell />} />
</Route>

2. 清理Netlify部署缓存 #

Netlify可能缓存旧构建文件导致新路由配置未生效：

• 手动触发重新部署，勾选「Clear cache and deploy site」选项
• 确认_redirects文件已被包含在部署产物中（可在Netlify部署详情的文件列表中查看）

3. 修复Token解析逻辑 #

部署后可能因Token的URL安全Base64编码问题导致解析失败，修改getPayloadFromToken函数：

const getPayloadFromToken = (token) => {
  const encodedPayload = token.split('.')[1]
    .replace(/-/g, '+')
    .replace(/_/g, '/');
  return JSON.parse(atob(encodedPayload));
};

4. 确认路由根组件配置 #

确保应用根组件使用BrowserRouter包裹（Netlify部署的单页应用需用BrowserRouter，而非HashRouter，除非修改重定向规则）：

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

验证步骤 #

1. 修改路由路径为相对路径后，本地测试确认功能正常
2. 清理Netlify缓存并重新部署
3. 部署后打开浏览器控制台，查看token和user状态，确认Auth组件逻辑正常

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