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了还是怎样一直没弄出来。