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

【问题标题】：Mutliple components rendered in React JS using Router使用路由器在 React JS 中呈现的多个组件
【发布时间】：2021-05-01 11:32:37
【问题描述】：

我在查看此帖子后尝试使用<Switch> 和exact：React Router v4 renders multiple routes 但它没有解决我的问题，即我的两个组件在<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 问题

【问题讨论】：

标签： javascript reactjs react-router navigation react-router-dom

【解决方案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>
  );
}

【讨论】：