Javascript 在react中使用按钮导航的正确方法

我正在React中处理一个项目，我最不想做的事情之一是使用主页上的按钮导航到地图组件并更改起始位置。因此，基本上在主页上，用户会单击“华盛顿特区”，它会路由到my/map，并传递DC的地图起始坐标。我的问题是什么是最合适的方法？我目前的代码不起作用，因为我还在讨论它的体系结构，它看起来像：

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

到目前为止，我提出了哪些资源和想法，其中包括：

• 我不应该在onClick中使用路由，因为这会给我一个“预期的赋值或函数调用，而是看到一个表达式没有未使用的表达式”错误
• 查看并使我相信我需要在/应用程序中更改路由器以适应传递的数据
• 也许我需要使用url来实现这一点，比如website.com/map/：center

---

我觉得这个问题很琐碎，但我这样问是为了让我能养成良好的习惯。谢谢

您可以在

/App

上创建新的

。您可以根据需要将道具向下传递到

Map

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

然后在

主页上

只需调用

this.props.updateWord（someValue）

即可更新

应用程序

上的coords状态

如果您需要立即重定向，我建议使用

（）或使用

应用程序上的历史api

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

这正是我要找的，只是要改变周围的样式，使它像一个按钮跨度。然后我将（道具）添加到我的功能组件中，并在GoogleMaps包装器中调用它。

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

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

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