javascript - 如何在 React 中在没有全页面刷新的情况下在组件之间路由？

Question

目前我正在做这样的事情：

  const [hide, setHide] = useState('');

  function hideOnClick(id) {
      setHide({value: id})
    }

要处理我单击的值，然后我会将此值附加到当前 URL。

    useEffect(()=> {
    if (hide.value === undefined) {
        const url = window.location.origin
    } else {
        window.location.href = url +'/?search='+ hide.value
    }
      console.log(url);
}, [hide.value]);

然后我会尝试像这样渲染这些组件：

return (
<div className="App">

  <div style={{ height: 600 }}>
    <BrowserRouter>
        <Switch>
          <Route exact path="/"><Chord hideOnClick={hideOnClick} keys={keys} colors={colors}/></Route>
          <Route exact path="/?search=Valutazione.Valutazione"><ValutazioneValutazione hideOnClick={hideOnClick} keys={keys} colors={colors} matrix={matrix}/></Route>
        </Switch>
    </BrowserRouter>

但是第一个组件（路由页面的那个）弹出，但是当我点击并且 URL 没有改变时，只是一个完整的页面重新加载和路由组件（Chord）。

如何在两个组件之间导航？还有一种方法可以避免整页刷新吗？

感谢您的任何回复