Wouter路由React Link state传递异常：TestComponent获取state为undefined

安全阿岳

2026-6-30

Wouter路由state传递返回undefined问题解决

问题根源

Wouter的useLocation Hook返回的是数组而非对象，你原代码中用对象解构let { state } = useLocation()的方式完全错误，导致无法获取state值。另外，App.jsx中缺少顶层<Router>组件包裹，这也会导致路由状态无法正常传递。

修正步骤及代码

修复App.jsx：添加Router包裹
确保所有路由组件都在<Router>内部，这是Wouter路由正常工作的前提：

// App.jsx
import TestComponent from './test/TestComponent.jsx';
import { Route, Router } from "wouter";

return (
  <Router>
    <Route path="/test" component={TestComponent} />
  </Router>
)

修复TestComponent.jsx：正确使用useLocation
通过数组解构获取location对象，再从中读取state属性：

// TestComponent.jsx
import React from 'react';
import { useLocation } from 'wouter';

const TestComponent = () => {
    const [location] = useLocation();
    console.log(location.state); // 现在能拿到{ testValue: "Hello, world!" }
    return (
        <div>
            <h1>Test Component</h1>
            {/* 直接使用state中的值 */}
            <p>{location.state?.testValue}</p>
        </div>
    );
}
export default TestComponent;

AnyComponent.jsx无需修改
你的Link组件传参方式是正确的，保持原代码即可：

// AnyComponent.jsx
import { Link } from 'wouter';

const AnyComponent = () => (
    <div>
        <Link href="/test" state={{ testValue: "Hello, world!" }}>Go to Test Component</Link>
    </div>
);

export default AnyComponent;