javascript - React - 如何使用路线导航到下一个弹出视图？

Question

我试图找到解决这个问题的方法，但没有成功。所以我有一个弹出视图，想法是使用路由导航到弹出窗口中的新视图（组件）。这是我到目前为止所拥有的：

这是触发时打开的 Popup 组件：

import styled from "styled-components";
import { BrowserRouter as Router, Link as LinkR, Switch, Route } from "react-router-dom";

export const NavBtn = styled(LinkR)`
`;

export default function App(props) {

  return (
    <div className="ms-welcome">
      <LogoWrap>
        <LogoBtn>
          <LogoText>Welcome to the first popup view</LogoText>
        </LogoBtn>
      </LogoWrap>
      <hr />
      <Router>
        <Switch>
          <NavBtn to="/PopupSecondView">
            <NavBtnLink>Next window</NavBtnLink>
          </NavBtn>
          <Route path="/PopupSecondView" component={SecondView} />
        </Switch>
      </Router>
    </div>
  );
}

这是我的第二个弹出视图（组件）：

export default function SecondView(props) {
  
    return (
      <div >
        <LogoWrap>
          <LogoBtn>
            <LogoText>Welcome to the second view</LogoText>
          </LogoBtn>
        </LogoWrap>
        <hr />
          <NavBtn>
            <NavBtnLink >Previous window</NavBtnLink>
          </NavBtn>
      </div>
    );
  }

这是我的 App.js，它不在我的项目的根目录中。它与弹出组件位于同一文件夹内：

export default function App(props) {

  return (
    <div className="ms-welcome">
      <Router>
        <Switch>
          <Route path="/PopupSecondView" component={SecondView} />
        </Switch>
      </Router>
      <LogoWrap>
        <LogoBtn>
          <AiFillHome />
          <LogoText>Virta</LogoText>
        </LogoBtn>
        <LogoBtn>
          <AiOutlineInfoCircle />
          <LogoText>Info</LogoText>
        </LogoBtn>
        <LogoBtn>
          <VscRefresh />
          <LogoText>Update</LogoText>
        </LogoBtn>
      </LogoWrap>
      <Button
        className="ms-welcome__action"
        buttonType={ButtonType.hero}
        iconProps={{ iconName: "ChevronRight" }}
        onClick={click}
      >
        Open popup dialog window demo
      </Button>

      <hr />
    </div>
  );
}

帮助将不胜感激！

标签： javascriptreactjsreact-routerreact-navigationreact-router-dom