如何解决我将如何附加随机生成的字符串来响应路由器 useParams()?
我的问题解释:
基本上我正在尝试创建一个多人网络游戏。在尝试了解如何在“开始新游戏”时打开新页面时,我遇到了一个逻辑问题。
我想通过一个函数随机生成一个字符串,然后将该结果用作我 url 中的 :id。 我可以成功创建随机生成的字符串,但仍然对如何在 react-router v5 的 useParams() 中使用它感到困惑。
如果可能的话,我还想将一个套接字连接到每个生成的 url,这样它就可以轻松地拆分关注点并且一切都保持原样。
所以它会在页面的逻辑中
如果您对处理此问题的不同方式有任何其他见解,将不胜感激!
我的代码
App.jsx
import React from 'react';
import Landing from './Landing/Landing.jsx';
import Game from './Game/Game.jsx';
import { HashRouter as Router,Switch,Route } from 'react-router-dom';
import './Styles/styles.scss';
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={Landing} />
<Route exact path="/game/:id" component={Game} />
</Switch>
</Router>
)
}
export default App
Landing.jsx
import React,{useEffect,useState} from 'react';
import { useParams } from 'react-router-dom';
const Landing = () => {
const { id } = useParams();
const [randomroom,setRandomroom] = useState('');
/*
This functions needs to create :id for react-router and also create room id for socket.io
*/
const getRandomString = (length) => {
let randomChars = 'ABCDEFGHIJKLMnopQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for ( let i = 0; i < length; i++ ) {
result += randomChars.charat(Math.floor(Math.random() * randomChars.length));
}
setRandomroom(result)
}
return (
<div>
<button onClick={() => {
getRandomString(20);
}}>
Start New Game
</button>
</div>
)
}
export default Landing
Game.jsx
import React from 'react'
const Game = () => {
/*
This will hold the content for game page including Map,scoreboard,usernames,list of items,etc
*/
return (
<div>
HELLO FROM GAME
</div>
)
}
export default Game
解决方法
由于 url /game/:id
呈现 Game
组件,因此您需要使用 useParams
来获取该 URL 参数的值。
因此您的 Game
代码将如下所示:
const Game = () => {
const { id } = useParams();
return (
<div>
HELLO FROM GAME
</div>
)
}
然后你可以将这个 ID 用于你想到的任何目的。
,您可以使用 react-router-dom
的 Link
组件解决此问题,并将 to
属性设置为所需的 URL(包括 :id
部分)。
然后,您可以从新页面发出网络请求,使用 id:
提取 URL 的 useParams
部分:
/// first-page.jsx
export const FirstPage = () => {
const getRandomString = useCallback(() => {
// generate your string...
return 'your_random_string';
},[]);
return (
<>
<div>Some other components ...</div>
<Link
to={`/second/page/:${getRandomString()}`}
>
Start Game!
</Link>
</>
);
};
/// second-page.jsx
export const Secondpage = () => {
const { id } = useParams();
return (
<div>The page's ID is: {id}</div>
);
};
/// index.jsx
ReactDOM.render(
<Router>
<Switch>
<Route exact path="/first/page">
<FirstPage />
</Route>
<Route path="/second/page/:id">
<SecondPage />
</Route>
</Switch>
</Router>
);
如果您查看最后一个片段中的路由,您会看到 URL 的最后一个片段被 react-router 标识为 :id
。这与第一页中使用的模式匹配,然后可以由第二页中的 useParams
读取。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。