ReactJS

Question

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

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

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

导航栏：

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

有什么方法可以通过 Navbar ul 选项更改 MainContainer 的内容吗？

Answer 1

看看这个：

我想这可能就是你要找的：它使用了最流行的 React 路由库 react-router。

Answer 2

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

npm i react-router-dom

您可以阅读更多相关信息 here。

现在您有了库，您可以在顶部的 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 /> 和 <Settings /> 组件

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

但主要目标是放入要在用户重定向到该路径时显示的组件（或函数）。它也可以是这样的：

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

最重要的一个功能是在转到新 link/page 时将用户带到页面顶部的功能。为此，您可以在 <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>
  );

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

ReactJS - How to change route in different component?

routes

url-routing