从组件导航到不同的组件 [React]

Posted 2023-02-23

【中文标题】从组件导航到不同的组件 [React]

【英文标题】：Navigate to different component from a component [React]

【发布时间】：2021-02-18 23:37:42

【问题描述】：

我在 src/components 中有两个组件，分别命名为 Comp1.js 和 Comp2.js

Comp1.js 有以下代码：

export default class Comp1 extends Component
  .... 
  render()
    return(
      <h1>Comp1</h1>
      <div> In comp1 </div>
      <BrowserRouter>
          <Link to="/comp2"> Comp2 </Link>
          <Switch>
             <Router path="/comp2" component=Comp2 />
          </Switch>
      </BrowserRouter>
    )
  

Comp2.js 有以下代码：

export default class Comp2 extends Component
 ...
 render()
   return(
    <h1>Comp2</h1>
    <div> In comp2 </div>
   )
 

每当我单击 Comp1 中的链接时，它会将我重定向到 Comp2，但它还会显示标题“Comp1”、div“In comp1”和链接。我只想渲染 Comp2 并摆脱 Comp1 标头、div 和链接。如果您需要更多说明，请告诉我。

【参考方案1】：

您必须将浏览器路由器包装器移动到主应用程序根目录。这就是配置 React 应用程序路由的方式。然后，您可以在 comp1 中使用 <Link to="/comp2"> Comp2 </Link> 并在 comp2 中时正确导航到 comp2 而无需 comp1 标头。

import React from "react"
 import  render  from "react-dom"
 import  BrowserRouter, Switch, Route  from "react-router-dom"
 import Home from "./Home"
 import Comp1 from "./Comp1"
 import Comp1 from "./Comp2"

 const App = () => (
 <BrowserRouter>
  <Switch>
   <Route path="/" component=Home exact />
   <Route path="/comp1" component=Comp1 exact />
   <Route path="/comp2" component=Comp2 exact />
 </Switch>
</BrowserRouter>
)

比较1，

export default class Comp1 extends Component
  .... 
  render()
    return(
      <h1>Comp1</h1>
      <div> In comp1 </div>
      <Link to="/comp2"> Comp2 </Link>
    )
  

【讨论】：

难道没有办法，我可以在 Comp1 中做任何事情。因为，去应用程序和配置每个链接会很混乱

问题是如果你在某个地方使用浏览器路由器，实际发生的是它内部的路由只会在浏览器路由器内部呈现。所以最好这样说。您可以确定的一件事就是将 BroserRouter 放在 app.js 中。确定应在何处呈现 comp1 和 comp2。把浏览器路由器放在那里。然后导入 comp1 和 comp2。但你已经试一试了。

这很完美！诀窍是让 App.js “空”（没有任何东西呈现到屏幕上）。然后，设置 指向您的“主页”。这样，每当站点加载时，屏幕不会是空白的（因为 App.js），站点将继续到将呈现的主页。美丽的！ @DushanRanasinghe 你让我免于花费 10 多个小时来解决这个问题！阿桑特萨那！