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

【问题标题】：ReactJS - How to change route in different component?ReactJS - 如何更改不同组件中的路线？
【发布时间】：2020-10-18 21:50:39
【问题描述】：

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

我有一个这样的应用：

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

导航栏：

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

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

【问题讨论】：

你在使用路由库吗？（最受欢迎的是react-router）

标签： reactjs routes url-routing

【解决方案1】：

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

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>)}

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

【讨论】：

为什么不在导航栏中使用Link 组件？

【解决方案2】：

看看这个： React router nav bar example

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

【讨论】：