從組件導航到不同的組件 [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

您必須將瀏覽器路由器包裝器移動到主應用程序根目錄。 這就是反應應用程序路由的配置方式。 然后，您可以<Link to="/comp2"> Comp2 </Link>使用<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>
)

Comp1，

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