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

Question

我在 src/components 中有两个组件，名为 Comp1.js 和 Comp2.jsComp1.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

您必须将浏览器路由器包装器移至主应用程序根目录。这就是反应应用程序路由的配置方式。然后，您可以在 comp2 中使用<Link to="/comp2"> Comp2 </Link>内部 comp1 并正确导航到 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>

    )

  }

}