在反應中使用按鈕導航的正確方法

Question

我正在使用 React 開發一個項目，我最不想做的事情之一是使用主頁上的按鈕導航到 Map 組件並更改起始位置。 因此，基本上在主頁上，用戶會單擊“華盛頓特區”，它會路由到我的 /map 並傳遞 map DC 的起始坐標。 我的問題是最合適的方法是什么？ 我當前的代碼不起作用，因為我仍在討論它的架構，它看起來像：

   <button
     className="tourButtons"
     onClick={() => {
       <Route exact path="/home" render={ (washington) =>
          <Map {...washington} />
       }/>
     }}
    >
    Washington, DC
   </button>

我的 Map 是一個功能組件，如果您通過不同的按鈕加載，它有一個默認中心。 該代碼的相關部分只能是： const center = { lat: 39.7459467, lng: -75.5465889, }; 和<GoogleMap center={center}>

我在 /App 中的路由器目前看起來像（最后添加主頁，最終改變了這條路線，所以家在 / 和 map 在 /map）

 <Switch>
      <Route exact path="/home" component={Home}></Route>
      <Route exact path="/" component={Map}></Route>
      <Route exact path="/suggest" component={Form}></Route>
 </Switch>

到目前為止，關於我提出的資源和想法的漫談包括：

• 我不應該在我的 onClick 中使用路由，因為這會給我一個“預期的分配或 function 調用，而是看到一個表達式 no-unused-expressions”錯誤
• 看着https://github.com/ReactTraining/react-router/issues/4105和https://reactrouter.com/web/api/Route/route-props這讓我相信我需要改變我的路由器在 /App 中以容納傳遞的數據
• 也許我需要使用 url 來完成此操作，例如 website.com/map/:center？

我覺得這個問題很微不足道，但我提出這個問題是為了養成良好的習慣。 謝謝！

Answer 1

您可以在/App上創建一個新的<Route/> 。 您可以根據需要將道具傳遞給Map 。

<Route
    path='/map'
    render={(props) =>
        <Map
            {...props}
            coords={this.state.coords}
        />
    }
/>

由於您在Home組件上，您可能需要通過 prop 將 function 從App傳遞到Home ，這樣您就可以更新App上的坐標 state，您將作為 prop 向下傳遞到Map 。 應用程序示例代碼：

updateCoords = (val) => {
    this.setState({
        coords: val
    })
}

<Route
    path='/home'
    render={(props) =>
        <Home
            {...props}
            updateCoords={this.updateCoords}
        />
    }
/>

然后在Home上簡單地調用this.props.updateCoords(someValue)來更新App上坐標 state 的 state。

如果您需要立即重定向，我建議您使用<Link> ( https://reactrouter.com/web/api/Link ) 或在App上使用 history api

this.props.history.push(`/${someRoute}`);