1: React 中嵌套路由:
class App extends Component {
render() {
return (
<div className="container">
<div className="jumbotron-fluid" py-4 mt-4>
<Header a={1}>
</div>
<div className="row">
<div className="col-3">
<div className="nav flex-column nav-pills p-3 border rounded">
// 标签体内容作为一个特殊的props 传递给组件, 传递给children, value 是标签的内容
<MyNavLink to="/home">Home</MyNavLink>
<MyNavLink to="/about">About<MyNavLink>
</div>
<div className="col-9">
<div className="p-3 border rounded h-100">
// 注册路由
<Switch>
<Route path="/home" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Redirect to="/home" />
</Switch>
</div>
</div>
</div>
</div>
</div>
)
}
}
-------------------------------------------------------------------
import Message from "./Message";
import News from "./News";
import MyNavLink from "../../components/MyNavLink"
import {Redirect, Route, Switch} from 'react-router-dom';
未完待续...
React 中嵌套路由
最新推荐文章于 2022-12-16 16:52:50 发布