React Native Web应用如何获取带参数的自定义URL路径？

我来帮你搞定这两个关键问题——先解决Webpack Dev Server的404错误，再实现获取URL路径并自行处理导航的需求：

第一步：修复Webpack Dev Server的Cannot GET /xxx错误 #

这个问题的核心是单页应用（SPA）的前端路由特性：当你直接访问localhost:8080/asdf时，Webpack Dev Server会默认去服务器根目录找asdf这个文件或文件夹，找不到就返回404。但我们需要所有路由请求都返回主页面的index.html，让React应用加载后再处理前端路由。

你只需要在webpack.config.js的devServer配置里添加historyApiFallback：

module.exports = {
  // 其他Webpack配置项...
  devServer: {
    // 关键配置：让所有路由请求都返回index.html
    historyApiFallback: true,
    // 如果需要更精细的路由重写规则，可以用下面的写法（一般默认true就足够）
    // historyApiFallback: {
    //   rewrites: [
    //     { from: /^\/.*$/, to: '/index.html' }
    //   ]
    // }
  }
};

配置完成后重启Dev Server，再访问localhost:8080/asdf就会正常加载React应用了。

第二步：在React应用中获取URL路径与参数 #

你不需要强耦合路径和页面，直接利用浏览器的原生API就能拿到完整的URL信息，再自行解析处理即可：

1. 获取路径与查询参数 #

在Web环境下，通过window.location对象可以直接获取：

• 路径部分：window.location.pathname（比如/some/path/here）
• 查询参数部分：window.location.search（比如?params=something）

可以用URLSearchParams轻松解析查询参数：

// 解析查询参数
const searchParams = new URLSearchParams(window.location.search);
const paramValue = searchParams.get('params'); // 得到"something"

2. 结合react-navigation触发导航 #

因为你用的是react-navigation 3.3.2，需要创建一个导航引用来在组件外部触发导航操作（比如在根组件的初始化逻辑里）：

函数组件示例

import React, { useEffect, createRef } from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

// 导入你的页面组件
import HomeScreen from './screens/HomeScreen';
import TargetScreen from './screens/TargetScreen';

// 创建栈导航
const AppNavigator = createStackNavigator({
  Home: HomeScreen,
  Target: TargetScreen,
});

const AppContainer = createAppContainer(AppNavigator);

// 创建导航引用，用于外部访问导航功能
const navigationRef = createRef();

function App() {
  useEffect(() => {
    // 页面加载时获取URL信息
    const currentPath = window.location.pathname;
    const searchParams = new URLSearchParams(window.location.search);
    const targetParam = searchParams.get('params');

    // 自行根据路径和参数处理导航
    if (currentPath === '/some/path/here' && targetParam) {
      navigationRef.current.navigate('Target', { param: targetParam });
    }
    // 也可以处理其他路径规则
    else if (currentPath === '/') {
      navigationRef.current.navigate('Home');
    }
  }, []);

  return <AppContainer ref={navigationRef} />;
}

export default App;

类组件示例

如果你用的是类组件，可以这样实现：

import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

const AppNavigator = createStackNavigator({ /* 你的页面配置 */ });
const AppContainer = createAppContainer(AppNavigator);

class App extends React.Component {
  componentDidMount() {
    const currentPath = window.location.pathname;
    const searchParams = new URLSearchParams(window.location.search);
    const targetParam = searchParams.get('params');

    // 根据路径触发导航
    if (currentPath === '/some/path/here') {
      this.navigator._navigation.navigate('Target', { param: targetParam });
    }
  }

  render() {
    return <AppContainer ref={nav => this.navigator = nav} />;
  }
}

export default App;

额外提示：生产环境部署注意事项 #

当你把应用部署到生产服务器（比如nginx）时，也需要做类似的路由 fallback 配置，否则刷新子页面依然会出现404。以nginx为例，在配置文件中添加：

location / {
  try_files $uri $uri/ /index.html;
}

这样就能确保生产环境下所有路由请求都返回index.html，让React应用正常处理前端路由。

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