时间戳

首页 > 解决方案 > React useRouteMatch 不显示嵌套链接内容

reactjs - React useRouteMatch 不显示嵌套链接内容

问题描述

我在这里有一个演示

我有两个页面主页和信息

Info 有一个嵌套导航，单击该导航应在导航下方显示组件，但仍显示 Info 标题和信息链接。

Currentlt 它显示了正确的 url，但显示了一个空白屏幕。

我在这里做错了什么

import React from "react";
import { Link, Route, useRouteMatch, Switch } from "react-router-dom";

import InfoOne from "./InfoOne";
import InfoTwo from "./InfoTwo";

const Info: React.FC = () => {
  const { path, url } = useRouteMatch();
  return (
    <div>
      <h2>Info</h2>
      <ul>
        <li>
          <Link to={`${url}/linkone`}>Info Link One</Link>
        </li>
        <li>
          <Link to={`${url}/linktwo`}>Info Link Two</Link>
        </li>
      </ul>

      <div>
        <Switch>
          <Route path={`${path}/linkone`}>
            <InfoOne />
          </Route>
          <Route path={`${path}/linktwo`}>
            <InfoTwo />
          </Route>
        </Switch>
      </div>
    </div>
  );
};

export default Info;

标签： reactjsreact-hooks

解决方案

问题出在你的Main.tsx.

你不需要exact这里：

<Route path="/info" component={Info} />

通过添加exact它确实在每条路线上安装了自己的组件。你只需要删除它。这是工作代码：https ://stackblitz.com/edit/react-ts-r7kqzj?file=Main.tsx

推荐阅读