react-router-dom怎么打开一个子组建，而且不让他显示父组件

Question

自定义main.jsx里面渲染了一个First，First里面有个Link点击以后打开Son，怎么才能打开Son，main和First都不显示呢。

**main.jsx**

import React from "react";
import { BrowserRouter as Router, Switch,Route, Link } from "react-router-dom";
import "./main.css";
import First from "./First";
import Snd from "./Snd";
import Third from "./Third";
import Son from './Son'
function A() {
  return (
    <Router>
      <div>
      <div>
          <Route exact path="/" component={First} />
          <Route path="/snd" component={Snd} />
          <Route path="/third" component={Third} />
        </div>
        <div
          className="footer"
          style={{
            height: 40,
            background: "#eee",
            width: "100%",
            position: "fixed",
            bottom: "0",
            display: "flex"
          }}
        >
          <Link to="/">首页</Link>
          <Link to="/snd">第二页</Link>
          <Link to="/third">第三页</Link>
        </div>
        
      </div>
    </Router>
  );
}
export default A;

---

***First.jsx***
import React from 'react';
import { BrowserRouter as Router, Switch,Route, Link } from "react-router-dom";
import Son from './Son'
function First(){
    return (
        <Switch>
            <div>
            <div style={{width:200,height:200}}>
                <Link to="/son">进子页面</Link>
            </div>
            <Route path="/son" component={Son}></Route>
            </div>
        </Switch>
        
    )
}
export default First;

在本论坛看的用switch，但是路径变了，son没有渲染进来，而且底部导航栏还是显示。显然我写的不对，请大哥们帮忙看看

Answer 1

谢邀！临近下班，回答一发。
如果您希望组件First和组件Son，两个组件内容同时展现一个页面中，去掉 exact 参数 或 将值改为false。如果您不希望两个组件内容同时展现一个页面中，将组件First的<Route path="/son" component={Son}></Route> 挪到main.jsx即可，记得删掉Switch 。

Answer 2

回复位置回复错了-------