react實現嵌套路由

一.非嵌套型即只有一層路由

<Link to="/">

<Icon type="pie-chart" />

<span>首頁</span>

</Link>

<Link to="/user">

<Icon type="user" />

<span>用戶</span>

</Link>

<Link to="/articleList">文章列表</Link>

import { HashRouter as Router, Route, Switch } from 'react-router-dom'

<Router>

<Switch>

<Route path="/" exact={true} component={Home}></Route>

<Route path="/articleList" component={ArticleList}></Route>

<Route path="/user" component={User}></Route>

</Switch>

</Router>

這種方式就能實現路由的匹配加載。

二.類似后台系統的路由構建

App.js

<Router>

<div className="App">

<Switch>

<Route path="/signIn" component={SignIn}></Route>

<Route path="/signUp" component={SignUp}></Route>

<Route parth="/" component={Layout}></Route>

</Switch>

</div>

</Router>

Layout.js

<LayoutWrapper primary>

<Layout style={{ minHeight: '100vh' }}>

<SiderBar></SiderBar>

<Layout>

<Content className="content">

<HeaderBar />

<Breadcrumb className="content-bread">

<Breadcrumb.Item>User</Breadcrumb.Item>

<Breadcrumb.Item>Bill</Breadcrumb.Item>

</Breadcrumb>

<div className="content-body">

<Switch>

<Route path="/" exact={true} component={Home}></Route>

<Route path="/ui" component={UI}></Route>

<Route path="/articleList" component={ArticleList}></Route>

<Route path="/user" component={User}></Route>

</Switch>

</div>

</Content>

</Layout>

</Layout>

</LayoutWrapper>

這樣就能實現路由嵌套，相比vue，我只能說react的路由就是垃圾。

網上還有一種方式是用{this.props.children}，不知道是出bug了還是怎樣一直沒弄出來。