React Router配置可直接访问的URL路由 类组件场景问题咨询

1. 修正路由配置 #

你当前的路由路径存在语法错误，删除多余的大括号即可：

// React Router v5 正确写法
<Route path="/page/:id" component={Body} />

// 若使用React Router v6，调整为如下写法
<Route path="/page/:id" element={<Body />} />

你现有的页码按钮和Link封装逻辑无需调整。

2. 类组件内获取路由参数并拉取数据 #

无需使用hooks，根据你使用的React Router版本选择对应方案即可：

针对React Router v5 #

通过component属性挂载的路由组件，默认会被注入match、location、history三个路由属性，直接在类组件生命周期中调用即可：

class Body extends React.Component {
  // 直接输入URL进入页面/首次加载时触发，拉取对应页面数据
  componentDidMount() {
    const pageId = this.props.match.params.id
    this.fetchPageData(pageId)
  }

  // 点击Link跳转页面、路由参数变化时触发，更新页面数据
  componentDidUpdate(prevProps) {
    const oldPageId = prevProps.match.params.id
    const newPageId = this.props.match.params.id
    if (oldPageId !== newPageId) {
      this.fetchPageData(newPageId)
    }
  }

  // 封装页面数据请求逻辑
  fetchPageData = (pageId) => {
    // 此处传入pageId调用你的业务接口，获取对应页面的文本、按钮配置即可
  }

  render() {
    // 保留原有渲染逻辑
  }
}

如果你的Body组件不是直接挂载在Route下，可使用withRouter高阶组件包裹后导出：

import { withRouter } from 'react-router-dom'
export default withRouter(Body)

针对React Router v6 #

v6版本移除了类组件默认的路由属性注入和内置withRouter，可自行封装简易高阶组件传递路由参数：

// 自定义withRouter高阶组件，放在公共工具文件或者Body组件顶部均可
import { useParams, useLocation, useNavigate } from 'react-router-dom'
function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    const location = useLocation()
    const navigate = useNavigate()
    const params = useParams()
    return <Component {...props} router={{ location, navigate, params }} />
  }
  return ComponentWithRouterProp
}

// 包裹Body组件后导出
export default withRouter(Body)

之后在Body组件中通过this.props.router.params.id获取页码参数，生命周期逻辑和上述v5版本一致，仅替换参数来源即可。

3. 解决直接输入URL返回404问题 #

如果配置完成后直接输入URL仍提示404，需要调整服务端的历史路由fallback配置：

• 本地开发阶段：webpack脚手架开启devServer.historyApiFallback = true，vite脚手架开启server.historyApiFallback = true
• 生产部署阶段：Nginx配置中添加try_files $uri $uri/ /index.html;，确保所有路由请求都指向项目入口html文件

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