时间戳

首页 > 解决方案 > ReactJS - 如何更改不同组件中的路线？

reactjs - ReactJS - 如何更改不同组件中的路线？

问题描述

我对 ReactJS 及其路由原则很陌生，我自己尝试过解决这个问题但没有成功，我开始怀疑是否有可能实现我的想法。

我有一个这样的应用程序：

<App>
  <Navbar />
  <MainContainer/>
</App>

导航栏：

<Navbar>
   <ul>
    <li>My Account</li>
    <li>Settings</li>
      .......
   </ul>
</Navbar>

有没有办法从 Navbar ul 选项更改 MainContainer 的内容？

标签： reactjsroutesurl-routing

解决方案

您需要首先添加一个路由库，例如最流行的路由库之一 react-router-dom。

npm i react-router-dom

你可以在这里阅读更多关于它的信息。

现在您有了库，您可以在顶部的 App.tsx 文件（或您在此处发布的文件）中导入以下内容：

import { Switch, Router, BrowserRouter } from "react-router-dom";

这些是路由库的基本用法之一，但如果我们现在继续处理您的文件，那么它最终会看起来像这样：

<BrowserRouter>
  <App>
    <Navbar />
    <MainContainer>
      <Route />
        <Switch>
          <Route exact path="/my-acount" component={() => <MyAccount />} />
          <Route exact path="/settings" component={() => <Settings />} />
        </Switch>
    </MainContainer>
  </App>
</BrowserRouter>

在这种情况下，您的导航栏将如下所示：

<Navbar>
   <ul>
    <li><a href="/my-account">My Account</a></li>
    <li><a href="/settings">Settings</a></li>
      .......
   </ul>
</Navbar>

你可能会看到里面的<MyAccount />and<Settings />组件

<Route exact path="link" component={() => ...} />

但主要目标是放入您想要在用户被重定向到该路径时显示的组件（或功能）。它也可以是：

<Route exact path="/my-account" component={() => return (<p>My Account</p>)}

一个很好的功能是在转到新链接/页面时将用户发送到页面顶部的功能。为此，您可以在其中添加以下函数<Route/>，使其产生如下结果：


  const scrollToTop = () => {
    window.scrollTo(0, 0);
    return null;
  };

  return (
  <BrowserRouter>
    <App>
      <Navbar />
      <MainContainer>
        <Route component={scrollToTop} /> {/* <-- here */}
          <Switch>
            <Route exact path="/my-acount" component={() => <MyAccount />} />
            <Route exact path="/settings" component={() => <Settings />} />
          </Switch>
      </MainContainer>
    </App>
  </BrowserRouter>
  );

推荐阅读