reactjs - 我可以使用相同的路由通过使用多个链接来渲染组件吗？

Question

这是我的标题，我想重定向到一个组件，但多个链接无法在单个路由上重定向我的要求是重定向到 /iframe 路由

```<Menu theme="dark" mode="horizontal">
          <SubMenu key="sub2" icon={<UserOutlined />} title="PHP Page">
          <Menu.Item key="13"><Link to="/iframe/1">PHP 3</Link></Menu.Item>
          <Menu.Item key="14"><Link to="/iframe/2">PHP 4</Link></Menu.Item>
          <Menu.Item key="15"><Link to="/iframe/3">PHP 5</Link></Menu.Item>
        </SubMenu>
          <Menu.Item key="6" icon={<BarChartOutlined />}>
            <Link to="/iframe/4">PHP 1</Link>
          </Menu.Item>
</Menu>```

这是我的反应路由器 <Context.Provider value={[context, setContext]}> <Switch> <Route exact path="/iframe" component={FirstPHP} /> <Route exact path="/r/4" component={FourthPage} /> </Switch> </Context.Provider>

问题是当我点击链接时

```<Menu.Item key="13"><Link to="/iframe/1">PHP 3</Link></Menu.Item>
<Menu.Item key="14"><Link to="/iframe/2">PHP 4</Link></Menu.Item>
<Menu.Item key="15"><Link to="/iframe/3">PHP 5</Link></Menu.Item>```

它应该重定向到

```<Route exact path="/iframe" component={FirstPHP} />```

在 FirstPHP 组件中不更改链接标记

帮助我如果有任何可能的方法

标签： reactjsreact-routerreact-router-dom

Answer 1

您可以在对象state内部传递而不是作为字符串使用，如下所示。toto

<Link to={{ pathname: "/iframe", state: { iframeNo: 1 } }}>PHP 3</Link>;

/iframe然后为路由创建一个通用组件。

<Route exact path="/iframe" component={PHPComponent} />

然后iframeNo从PHPComponent组件中提取，然后在该组件内部您可以有条件地渲染，FirstPHP组件如下。SecondPHPThirdPHP

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

const PHPComponent = () => {
  const location = useLocation();
  const { iframeNo } = location.state;

  console.log("history location details: ", location);
  console.log("extracted iframeNo: ", iframeNo);

  if (iframeNo === 1) {
    return <FirstPHP />;
  } else if (iframeNo === 2) {
    return <SecondPHP />;
  } else if (iframeNo === 3) {
    return <ThirdPHP />;
  }
};

export default PHPComponent;