从一个组件导航到不同的组件 [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

您必须将浏览器路由器包装器移至主应用程序根目录。这就是反应应用程序路由的配置方式。然后，您可以在 comp2 中使用<Link to="/comp2"> Comp2 </Link>内部 comp1 并正确导航到 comp2，而无需使用 comp1 标头。import React from "react"&nbsp;import { render } from "react-dom"&nbsp;import { BrowserRouter, Switch, Route } from "react-router-dom"&nbsp;import Home from "./Home"&nbsp;import Comp1 from "./Comp1"&nbsp;import Comp1 from "./Comp2"&nbsp;const App = () => (&nbsp;<BrowserRouter>&nbsp; <Switch>&nbsp; &nbsp;<Route path="/" component={Home} exact />&nbsp; &nbsp;<Route path="/comp1" component={Comp1} exact />&nbsp; &nbsp;<Route path="/comp2" component={Comp2} exact />&nbsp;</Switch></BrowserRouter>)补偿1export default class Comp1 extends Component{&nbsp; ....&nbsp;&nbsp; render(){&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; <h1>Comp1</h1>&nbsp; &nbsp; &nbsp; <div> In comp1 </div>&nbsp; &nbsp; &nbsp; <Link to="/comp2"> Comp2 </Link>&nbsp; &nbsp; )&nbsp; }}