单击按钮后重定向并在不同的路线上呈现选项卡

Question

点击一组难度按钮后，我想在“/game”路由中渲染一个 Tabel 组件。因此，应用程序必须根据在 DifficultyButtons.js 中设置的难度状态从路由“/”传递到“/game”，从而呈现适当的表格。 我在 App.js 中管理 Route 组件，如下所示：`

      <Route path='/' render={() => <DifficultyButtons/>} />
      <Route path='/game' render={() => <Table/>} />

`

在文件 DifficultyButtons.js 中，重定向从单击设置状态“难度”的按钮开始，该状态将在文件 Table.js 中使用，我的目的是根据设置的难度级别按比例呈现表格。这是 Table.js：

`

const location = useLocation();
const rows = N*location.state;
const columns = M*location.state;


return (

    <Table responsive>
        <tbody>
        {Array.from({length: rows}).map((_, row_index) => (
            <tr key={row_index}>
                {Array.from({length: columns}).map((_, column_index) => (
                    <td key={column_index}>
                        try
                    </td>
                ))}
            </tr>
        ))}
        </tbody>
    </Table>
    </div>
)

` 这是呈现比例表的正确方法吗？我想了解为什么重定向到“/game”不起作用。 DifficultButtons.js 中的重定向代码：

{selected ? (
        <Redirect to={{
            pathname: '/game',
            state: {level:difficulty}
        }}

Answer 1

这是渲染比例表的正确方法吗？

这是一个相当主观的问题，但我认为您映射“二维数组”的方式没有任何明显的问题。

我想了解为什么重定向到 "/game" 不起作用。

当重定向和传递状态时，您正在传递state.level 上的难度级别

<Redirect
  to={{
    pathname: '/game',
    state: { level: difficulty }
  }}
/>

但只在目标路由的组件中引用location.state

const location = useLocation();
const rows = N * location.state;
const columns = M * location.state;

由于location.state 是一个对象，因此计算结果很可能rows 和columns 都是NaNs。

从路由状态中取消引用传递的level 值，如果level 没有在路由状态中传递，则为它提供安全的默认值，如果用户以某种方式，还为state 提供默认值> 直接导航到"/game"，其中的路由状态将简单地未定义。

const location = useLocation();
const { state: { level = 0 } = {} } = location;

const rows = N * level;
const columns = M * level;

您询问有关响应按钮单击的重定向，在这种情况下，您不能只从回调中调用/返回Redirect 组件并期望它影响正在呈现的任何内容。为此，您需要发出命令式重定向。使用history 对象以适当的状态重定向。

const history = useHistory();

...

// in some button's onClick handler
history.replace({
  pathname: '/game',
  state: { level: difficulty }
});

Answer 2

您可以使用“react-router-dom”中的“链接”来代替“重定向”。

<Link to="/game?level=difficulty" />

您可以在https://v5.reactrouter.com/web/api/Link 访问 v5 的官方文档