React Router 动态路由/post/:id直接访问返回空白页如何解决？

问题根因与解决方案 #

1. 服务端未配置前端路由 fallback（最常见原因）

你使用的BrowserRouter依赖HTML5 History API实现前端路由，页面内点击Link跳转是前端自行处理路由逻辑，直接访问/post/$id时浏览器会主动向服务端请求该路径的资源，而你的后端服务默认没有对应路径的响应规则，也没有配置所有请求兜底返回前端入口index.html，就会出现白屏/404问题。
对应解决方法根据部署环境调整：

• 本地webpack开发环境：在webpack配置中添加devServer: { historyApiFallback: true }即可
• Nginx部署：在站点配置的location块中添加try_files $uri $uri/ /index.html;
• Apache部署：在站点根目录新建.htaccess文件，添加重写规则将所有请求转发到index.html

2. 单页参数获取逻辑不严谨

你当前在Single组件中手动拆分路径获取文章ID的方式容错率低，且没有加加载/空状态，接口请求未完成或者ID匹配失败时也会出现空白。推荐用React Router官方提供的useParams获取路由参数，同时补充加载状态兜底：
修改后的Single.js代码参考：

import React, {useEffect, useState} from 'react';
import { useParams } from "react-router-dom";

function Single(props) {
  // 直接通过useParams获取路由中定义的postId参数
  const { postId } = useParams();
  const [content, setContent] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 推荐直接请求单篇文章接口，不需要拉全量列表再过滤，性能更高
    fetch(`http://127.0.0.1:8000/api/contents/${postId}`,{
      method:'GET',
      headers: {
        'Content-Type':'application/json',
        'Authorization': 'Token e02d408879bc0e2cc8bc6eb66cbd46c6af8e89ab'
      }
    })
    .then( resp => resp.json())
    .then( resp => {
      setContent(resp);
      setLoading(false);
    })
    .catch( error => {
      console.log(error);
      setLoading(false);
    })
  }, [postId])

  if(loading) return <div>加载中...</div>
  if(!content) return <div>文章不存在</div>

  return (
    <>
      That's detail page for content {content.id}
    </>
  );
}

export default Single;

排查验证步骤

直接访问/post/$id时打开浏览器控制台，查看Network面板：

• 如果/post/$id请求返回404，说明是服务端路由配置问题
• 如果请求正常返回，看Console面板有没有JS报错，对应调整代码即可

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