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

Mrlonely
  • 83

自定义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没有渲染进来,而且底部导航栏还是显示。显然我写的不对,请大哥们帮忙看看
图片描述

回复
阅读 881
2 个回答

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

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

你知道吗?

宣传栏