Javascript 使用路由器在React JS中呈现的多个组件

在看了这篇文章后，我尝试过使用

和

精确的
：但这并没有解决我的问题，即当
函数运行时，我的两个组件同时被渲染

代码：

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;

从“React”导入React；
导入“../styles/Onboarding.css”；
从“react Router dom”导入{Link，Route，BrowserRouter as Router，Switch}；
函数组件a（）{
返回(
标题
说明
进入
);
}
函数组件B（）{
返回(
欢迎来到ComponentB
)
}
导出默认组件a；

结果是组件A的html显示出来，下面是“欢迎使用组件B”。请帮助我解决此
reaact路由器
问题
显示
ComponentA
的内容，因为
ComponentB
现在是
ComponentA
的子路由。要单独渲染它们，需要这样的父组件：

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

导出默认函数App（）{
返回(
);
}

好的，非常感谢，伙计！