使用 Router 在 React JS 中呈现的多个组件

Question

我在查看此 post 后尝试使用 <Switch> 和 exact： 但它没有解决我的问题，这是我的两个组件在 <Link> 函数运行时同时渲染。

代码：

import React from "react";
import '../styles/Onboarding.css';
import {Link, Route, BrowserRouter as Router, Switch } from "react-router-dom";

function ComponentA() {

  return (
    <Router>
      <div className="parent">
        <h1 className="title">title</h1>
        <p className="description">description</p>
        <Link exact to="/componentB"><button className="button">enter</button></Link>
        <Switch>
          <Route exact path="/componentB" component={ComponentB} />
        </Switch>
      </div>
    </Router>
  );
}


function ComponentB() {
  return (
    <div>
      Welcome to ComponentB
    </div>
  )
}

export default ComponentA;

结果是组件 A 的 html 出现，下面是“欢迎使用组件 B”。请帮我解决这个 reaact-router 问题

Answer 1

显示 ComponentA 的内容，因为 ComponentB 现在是 ComponentA 的子路由。要单独渲染它们，需要这样的父组件：

export default function App() {
  return (
    <Router>
        <Switch>
          <Route exact path="/componentA" component={ComponentA} />
          <Route exact path="/componentB" component={ComponentB} />
        </Switch>
    </Router>
  );
}