Custom main.jsx renders a First,First with a Link in it and then opens Son,. How can I open Son,main and First without displaying them?
**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: "-sharpeee",
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, is used in this forum, but the path has changed, son is not rendered, and the bottom navigation bar is still displayed. Obviously what I wrote is wrong. Please take a look at
