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>