React Router 在同一个页面渲染目标页面

Question

export const Bar = (props) => {
  const classes = useStyles();
  return (
    <Fragment>
      <div className={classes.barWrapper}>
        {
          props.releaseData.map((item, idx) => {
            return (
              <Router>
                <Link className={classes.link} to={`/version/${item.id}`}><BarComponent/></Link>
                <Switch>
                  <Route path="/version/:id" children={<VersionPage />} />
                </Switch>
              </Router>
            )
          })
        }
      </div>
    </Fragment>
  );
}

我有一个呈现多个条形图的组件，它是可点击的，并且具有指向名为VersionPage的子组件的链接。

export const VersionPage = (props) => {
  const classes = useStyles();
  const { releaseTitle } = props
  let { id } = useParams();
  return (
    <Fragment>
      <h3}>{id}</h3>
    </Fragment>
  );
}

在子组件中，我使用useParams()来呈现通过 URL 传入的id 。但是，问题是它不会将用户重定向到新页面/release/:id ，而是在同一页面上呈现此VersionComponent页。

我怎样才能让它重定向到一个传入id的新页面？

Answer 1

这将在新标签页中打开页面

<Link target='_blank' className={classes.link} to={`/version/${item.id}`}><BarComponent/></Link>