React Router中Link传递location.state为undefined问题排查求助

问题根因 #

你遇到的location.state为undefined的核心原因是你给Link组件添加了target="_blank"属性：
React Router的路由state是存储在当前页面的history会话栈中的，target="_blank"会让链接在全新的浏览器标签页打开，新标签页是完全独立的浏览上下文，没有继承前一个页面的history会话数据，自然无法读取到传递的state值。

修复方案 #

如果你的业务确实需要新开标签页跳转，无法移除target="_blank"，可以选择以下替代方案传递数据：

• 方案1：将非敏感参数序列化后拼接到URL的search参数中，比如 /nomination/${nomination.id}?name=${encodeURIComponent(nomination.nominationName)}，目标页面通过useSearchParams钩子读取参数，也可以仅传ID，在目标页面调用接口补全全量数据
• 方案2：如果传递的数据敏感，可以先存入sessionStorage，跳转后读取并及时清除避免数据残留

额外优化建议 #

你的路由配置不符合React Router的规范：Switch组件的直接子元素只能是Route或Redirect组件，你当前把数据提供者NominationsDataProvider、SearchResultDataProvider直接放在Switch内部，会导致Switch的路由匹配逻辑异常，也可能影响路由props的向下传递，建议调整为如下结构：

<Router>
    <React.StrictMode>
      <NominationsDataProvider>
        <SearchResultDataProvider>
          <Switch>
            <Route exact path={'/login'} component={Login} />
            <Route exact path={'/searchresults'} component={SearchResults} />
            <Route
              exact
              path={'/searchhealthprovider/:id'}
              component={SearchHealthProvider}
            />
            <Route exact path="/nomination/:id" component={NominationsPage} />
            <Route exact path={['/', '/home']} component={Home} />
            <Route
              exact
              path={'/email-verification/:token'}
              component={VerifyEmail}
            />
          </Switch>
        </SearchResultDataProvider>
      </NominationsDataProvider>
    </React.StrictMode>
</Router>

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