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

Question

我在 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 和链接。如果您需要更多说明，请告诉我。

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