Question

我正在创建一个React应用程序（使用material-ui），该应用程序从数据库中获取到youtube视频的链接，创建缩略图等。我主要配置了UI，但是不确定路由的最佳方法是什么。我在左侧有一个菜单，显示了不同的主题（该主题与武术有关，因此每个菜单选项与之相关的动作不同，例如“打拳”，“踢”等）。我希望每个链接都单击以显示与该主题相关的视频，链接到的链接将存储在数据库中，并通过菜单选项查询与之关联的关键字。这是我感到困惑的地方-鉴于每个页面都将显示相同的组件（视频列表），只是使用不同的查询，我觉得没有必要为它们创建不同的页面（就像您使用react路由器），最好只更改当前页面上的数据。

我想我正在寻找有关我的直觉是否正确的建议，尽管我可以，但我不应该在此处使用类似react router的东西？

Answer 1

您可以将带参数的路由器使用。我正在复制并稍微修改一下React Router的示例。

export default function ParamsExample() {
  return (
    <Router>
      <div>
        <h2>Accounts</h2>

        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/:id" children={<Child />} />
        </Switch>
      </div>
    </Router>
  );
}

function Child() {
  // We can use the `useParams` hook here to access
  // the dynamic pieces of the URL.
  let { id } = useParams();

  React.useEffect(()=>{
    // TODO: id changed, you can fetch data here
  },[id])

  return (
    <div>
      <h3>ID: {id}</h3>
    </div>
  );
}

对于如何进行React应用程序设计感到困惑

1 个答案: