在 React 中的路由器组件之间传递数据
2020-07-07
430
我有一个基于
react-router-dom
的应用程序，目前有两个屏幕：一个用于初始设置，另一个需要第一个屏幕的一些信息。该信息存储在主页代码中的常量中，我想知道是否有方法可以在它们之间共享变量，或者以某种方式将它们传递给第二个。下面的代码和树提供了我如何设置它的基本概述。
结构：
App
|
Routes
|
BrowserRouter
____________________|____________________
| |
Route Route
Home ———— history.push("/in-game") ———> InGame
(+data)
主页代码片段：
const history = useHistory();
const toGame = () => history.push('/in-game');
const [colors, setColors] = useState();——————————
const [map, setMap] = useState();————————————————|—————————data I'd like to share with the InGame component
const [myColor, setMyColor] = useState();————————
真心希望我能帮上忙。谢谢！
2个回答
您可以为此使用历史对象。
要将路线从“home”更改为“ingame”，并将其他数据传递到“ingame”，
Home.js
const someEventHandler = event => {
history.push({
pathname: '/in-game',
state: { map: map }
});
};
要在“InGame”中访问它，
InGame.js
const location = useLocation();
console.log(location.state.map); //map value is available here
请尝试上述操作。有关历史记录的更多信息， https://reactrouter.com/web/api/history 请参阅 react-router 中的这些文档。
Ayyappa Gollu
2020-07-07
这有帮助吗
<Router>
<Switch>
<Route
path="/in-game/:data/:data2"
render={(props) => <InGame {...props} />}
/>
</Switch>
</Router>
这意味着您可以在游戏中的 URL 中传递两个参数作为获取参数。 这两个参数可以在 InGame 组件中解析为
this.props.match.params
要在任何地方调用此 URL，您可以使用（示例）
<a href="/in-game/param1/param2">Click me</a>
或
history.push("/in-game/param1/param2")
Chilarai
2020-07-07