在芯片中执行Onclick或OnDelete函数后，如何重定向到另一个URL？

Question

如何将来自React-router的两个Links添加到一个HTML元素？具体来说，用户单击芯片后，网页可以从服务器端获取数据并更改其URL。在用户单击Delete按钮后，网页可以显示所有数据并恢复其URL。

<Provider store={store}>
      <BrowserRouter>
        <>
          <CssBaseline />
          <Header />

          <Route path='/' exact component={Home}></Route>
          <Route path='/people' exact component={People}></Route>
          <Route path='/projects' exact component={Projects}></Route>
          <Route path='/publications' exact component={Publications}></Route>

          <Route path='/codeData' component={CodeData}></Route>
          <Route path='/codeData/:category' component={CodeData}></Route>

          <Route path='/classes' exact component={Classes}></Route>
          <Route path='/contact' exact component={Contact}></Route>

          <Footer />
        </>
      </BrowserRouter>
    </Provider>

我尝试在App.js中使用BrowserRouter和Route

const handleDelete = chipToDelete => () => {
    let count = 0;
    setChipData(chips =>
      chips.map(chip => {
        chip.selected = !chip.key === chipToDelete.key;
        count++;
        if (count === chips.length) {
          props.handleSetInitialCodeData()
        }
        return chip;
      })
    );
  };

  const handleClick = chipToClick => () => {
    setChipData(chips =>
      chips.map(chip => {
        chip.selected = chip.key === chipToClick.key;
        if (chip.selected) {
          props.handleChangeCodeData(chip.label)
        }
        return chip;
      })
    );
  }

  const containerStyles = container()
  const categoriesTypographyStyles = categoriesTypography()
  const chipsStyles = chips()

  return (
    <Box>

      <Box bgcolor={'rgba(0,0,0,.075)'} pt='1rem' pb='1rem' mb='2.5rem'>
        <Container maxWidth="lg" className={containerStyles.root}>
          <Box pt={1} pb={1}>

            <Typography
              className={categoriesTypographyStyles.root} variant='button' display='block'>Categories
          </Typography>


            <Box display="flex" flexWrap="wrap" m='0 0 1em' flexDirection='row'>
              {chipData.map(data => {
                return (
                  <Chip
                    key={data.key}
                    label={data.label}
                    onClick={handleClick(data)}
                    onDelete={data.selected ? handleDelete(data) : null}
                    className={chipsStyles.root}
                  />
                );
              })}
            </Box>

如何设置不仅可以从服务器端获取数据，还可以更改URL？