React.js中如何通过URL传递Props？

架构老林

2026-7-27

React.js通过URL传递布尔类型Props的正确方法

你遇到的错误是因为使用/Home/isOpen/false这种路径格式时，页面里的静态资源（比如bundle.dev.js）会以当前路径为基准请求，变成/Home/bundle.dev.js，而服务器没有为这个路径配置静态资源，返回了HTML页面，导致浏览器检测到MIME类型不匹配报错。下面是两种正确实现方式：

方式一：使用查询字符串（推荐）

这种方式无需修改路由配置，直接在URL后拼接参数：

目标URL：http://localhost:3000/Home?isOpen=false

在组件中获取参数：

函数组件（react-router-dom v6+）：

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

function Home() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  // 将字符串参数转为布尔值
  const isOpen = params.get('isOpen') === 'true';

  return <div>{isOpen ? '处于打开状态' : '处于关闭状态'}</div>;
}

类组件：

import React from 'react';

class Home extends React.Component {
  render() {
    const isOpen = this.props.location.search.split('=')[1] === 'true';
    return <div>{isOpen ? '处于打开状态' : '处于关闭状态'}</div>;
  }
}

方式二：使用路由路径参数

如果偏好路径参数的格式，需要先配置路由，同时修复静态资源路径问题：

1. 配置路由（react-router-dom v6+）：

import { Routes, Route } from 'react-router-dom';
import Home from './Home';

function App() {
  return (
    <Routes>
      // 定义带参数的路由路径
      <Route path="/Home/:isOpen" element={<Home />} />
    </Routes>
  );
}

2. 在组件中获取参数：

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

function Home() {
  const { isOpen } = useParams();
  // 将字符串参数转为布尔值
  const isOpenBool = isOpen === 'true';

  return <div>{isOpenBool ? '处于打开状态' : '处于关闭状态'}</div>;
}