ReactJS组件间路由跳转后页面空白无法渲染内容问题求助

1. App组件中配置的根路径路由添加了exact严格匹配规则，当地址跳转至/Details时，根路径路由匹配失败，<Issues />组件不会被渲染，嵌套在其内部的所有子组件（包括TwoPagesLayout里的路由规则）自然不会生效，导致页面空白。
2. 你将/Details的路由规则写在map循环内部，同一路径对应多份路由规则，即使上层组件正常渲染也会出现匹配逻辑异常，且无法区分不同issue的参数传递。

步骤1：调整App层路由配置 #

修改App组件的路由规则，移除根路径路由的exact属性，保证访问/Details路径时<Issues />组件可以正常渲染：

<Router>
  <div className="App">
    <Link to="/" style={{ textDecoration: "none" }}>
      <header>Project Issues</header>
    </Link>
    <Switch>
      <Route path="/">
        <Issues />
      </Route>
    </Switch>
  </div>
</Router>

步骤2：重构TwoPagesLayout组件的路由逻辑 #

将路由规则从map循环中移出，调整为动态路由格式，方便传递issue的唯一标识：

{/* 列表渲染只保留跳转逻辑 */}
{issues.map((issue: any) => (
  <div key={issue.id}>
    <Link to={`/details/${issue.id}`} style={{ textDecoration: "none" }}>
      <p className="issue-title">{issue.title}</p>
    </Link>
    <hr />
  </div>
))}

{/* 路由规则统一放在循环外部，匹配动态参数 */}
<Switch>
  <Route exact path="/details/:issueId">
    <IssueDetails issues={issues} />
  </Route>
</Switch>

步骤3：在IssueDetails组件中获取对应数据 #

通过React Router提供的useParams钩子获取路由参数，匹配对应issue数据：

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

function IssueDetails({ issues }) {
  const { issueId } = useParams();
  // 根据路由参数匹配对应issue
  const currentIssue = issues.find(issue => String(issue.id) === issueId);
  
  // 后续渲染currentIssue的相关内容即可
  return <div>{currentIssue?.title}</div>
}

如果修改后仍有问题，检查Issues组件内的窗口宽度判断逻辑，确认访问/details路径时，TwoPagesLayout组件处于正常渲染状态。

内容的提问来源于stack exchange，提问作者Menna T-Allah Magdy