多页应用预加载页面中从URL获取常量的问题求助

针对预加载场景下无法通过window.location获取road变量的问题，以下是几种可行的方案：

1. 利用框架路由参数（推荐） #

如果你的项目使用Next.js、React Router等框架，直接通过路由API获取动态参数是最可靠的方式，无需依赖window，预加载时也能正常获取值。

示例（Next.js App Router） #

假设你的动态页面路由为/[road]，在页面组件中直接从params获取：

export default function Main({ params }) {
  const road = params.road || "";

  const fetchData = async () => {
    // 使用road请求数据
  };
  
  useEffect(() => {
    fetchData();
  }, [road]);

  return (/* 渲染依赖road的HTML */);
}

示例（Next.js Pages Router） #

import { useRouter } from 'next/router';

function Main() {
  const router = useRouter();
  const road = router.query.road || "";

  const fetchData = async () => {
    // 使用road请求数据
  };
  
  useEffect(() => {
    // 确保road存在后再请求
    if (road) {
      fetchData();
    }
  }, [road]);

  return (/* 渲染依赖road的HTML */);
}

示例（React Router） #

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

function Main() {
  const { road } = useParams();
  const currentRoad = road || "";

  const fetchData = async () => {
    // 使用currentRoad请求数据
  };
  
  useEffect(() => {
    fetchData();
  }, [currentRoad]);

  return (/* 渲染依赖currentRoad的HTML */);
}

2. 导航时显式传递参数 #

在跳转到动态页面时，直接将road作为状态参数传递，避免从URL解析：

跳转页面代码 #

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

function SourcePage() {
  const navigate = useNavigate();
  const targetRoad = "example-road";

  const goToDynamicPage = () => {
    // 传递road到目标页面
    navigate(`/${targetRoad}`, { state: { road: targetRoad } });
  };

  return <button onClick={goToDynamicPage}>进入动态页面</button>;
}

动态页面接收参数 #

import { useLocation } from 'react-router-dom';
import { useState, useEffect } from 'react';

function Main() {
  const location = useLocation();
  // 优先从导航状态获取， fallback到URL解析
  const [road, setRoad] = useState(location.state?.road || "");

  const fetchData = async () => {
    // 使用road请求数据
  };
  
  useEffect(() => {
    // 如果导航状态没有传递，客户端初始化时从URL获取
    if (!road && typeof window !== "undefined") {
      const currentRoad = window.location.pathname.split("/")[1] || "";
      setRoad(currentRoad);
    }
  }, []);

  useEffect(() => {
    if (road) {
      fetchData();
    }
  }, [road]);

  return (/* 渲染依赖road的HTML */);
}

3. 客户端初始化状态（兜底方案） #

如果无法使用框架路由或导航传参，可以在组件挂载后再从window获取road，但需要处理初始空值的渲染状态：

import { useState, useEffect } from 'react';

function Main() {
  const [road, setRoad] = useState("");

  const fetchData = async () => {
    // 使用road请求数据
  };
  
  // 组件挂载后获取URL中的road
  useEffect(() => {
    const currentRoad = window.location.pathname.split("/")[1] || "";
    setRoad(currentRoad);
  }, []);

  // road更新后触发数据请求
  useEffect(() => {
    if (road) {
      fetchData();
    }
  }, [road]);

  // 初始渲染时显示加载状态
  if (!road) {
    return <div>加载中...</div>;
  }

  return (/* 渲染依赖road的HTML */);
}

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