我將如何附加一個隨機生成的字符串來響應路由器 useParams()？

Question

我的問題解釋：

基本上我正在嘗試創建一個多人 web 游戲。 在嘗試了解如何在“開始新游戲”時打開新頁面時，我遇到了一個邏輯問題。

我想通過 function 隨機生成一個字符串，然后在我的 url 中將該結果用作：id。 我可以成功創建隨機生成的字符串，但仍然對如何在我的 useParams() for react-router v5 中使用它感到困惑。

---

如果可能的話，我還想將一個套接字連接到每個生成的 url ，這樣它就可以輕松地解決問題並且一切都保持原位。

---

所以它會在頁面的邏輯中

1. 帶有開始新游戲按鈕的登陸頁面
2. 單擊新游戲按鈕，新選項卡將打開，其中包含與該特定游戲相關的游戲內容。

---

如果您對處理此問題的其他方法有任何其他見解，將不勝感激！

---

我的代碼

應用程序.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

登陸.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

游戲.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

我想要的視覺效果

Answer 1

由於 url /game/:id呈現Game組件，因此您需要使用useParams來獲取該 URL 參數的值。

所以你的Game代碼將如下所示：

const Game = () => {
    const { id } = useParams();

    return (
        <div>
            HELLO FROM GAME
        </div>
    )
}

然后，您可以將該 ID 用於您想到的任何目的。

Answer 2

您可以使用react-router-dom的Link組件解決此問題，並將to屬性設置為所需的 URL （包括:id部分）。

然后，您可以從新頁面發出網絡請求，使用useParams提取 URL 的id:部分：

/// 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讀取。