React精细化路由管理

·  阅读 123


src/route/index.js

import NotFound from '@/containers/NotFound'

// 进入home页的路由拦截(根据缓存判断,有缓存则放行,在Home组件内部进入下一级路由控制,没有缓存则重定向到登录页)
const HomeRouteInterceptor = ({component: Component, ...rest}) => (
  <Route
      {...rest}
	  render={props => (localStorage.getItem('IMS_INF_TOKEN') && localStorage.getItem('IMS_INF_TOKEN') !== "undefined") ? <Component {...props} /> : <Redirect to="/login"/>}
  />
);

// 最外层最底部的路由拦截(走到这里来的,均为没被HomeRouteInterceptor拦截的错误路由,
// 也是根据缓存判断,有缓存则表示已登录,此时重定向到home页,没有缓存则重定向到登录页)
const LastErrorRouteInterceptor = ({component: Component, ...rest}) => (
	<Route
		{...rest}
		render={props => (localStorage.getItem('IMS_INF_TOKEN') && localStorage.getItem('IMS_INF_TOKEN') !== "undefined") ? <Redirect to="/home"/> : <Redirect to="/login"/>}
	/>
);

class RouterIndex extends Component {
  render() {
    return (
      <Router>
        <Switch>
          {/*不需要登录的路由*/}
          <Route component={Land}
                 exact
                 path="/"
          ></Route>
          <Route component={Login}
              exact
              path="/login"
          ></Route>
          <Route component={Register}
              exact
              path="/register"
          ></Route>
          <Route component={RegSuccess}
                 exact
                 path="/regSuccess"
          ></Route>
          <Route component={ForgetLoginPassword}
                 exact
                 path="/forgetSendCode"
          ></Route>
          <Route component={ForgetTriggerEmailSuccess}
                 exact
                 path="/forgetTriggerEmailSuccess"
          ></Route>
          <Route component={ResetLoginPassword}
                 exact
                 path="/resetLoginPassword"
          ></Route>
          <Route component={ResetWithdrawPassword}
                 exact
                 path="/resetWithdrawPassword"
          ></Route>
          <Route component={ResetSuccess}
                 exact
                 path="/resetSuccess"
          ></Route>
          <Route component={HelpCenterFromLand}
                 exact
                 path="/helpCenter"
          ></Route>
          {/*进入home页后匹配的路由,匹配所有以"/home"开头的路由,
          包括一级路由"/home",二级路由"/home/xxx",三级路由"/home/xxx/yyy"等*/}
          <HomeRouteInterceptor component={Home}
              path="/home"
          ></HomeRouteInterceptor>
          {/*其他不识别的路由,最后走到这里*/}
          <LastErrorRouteInterceptor/>
        </Switch>
      </Router>
    );
  }
}

export default RouterIndex;复制代码

src/views/Home/index.js

<Content style={{padding: '0 calc(50% - 600px)'}}>
	<div style={{height: 20}}></div>
	<Switch>
		{/*不需要登录的路由*/}
		<Route component={DefaultPage}
					 exact
					 path="/home"
		></Route>
		<Route component={AccountCenter}
					 exact
					 path="/home/accountCenter"
		></Route>
		<Route component={FinancialCenter}
					 exact
					 path="/home/financialCenter"
		></Route>
		<Route component={PaymentInfo}
					 exact
					 path="/home/paymentInfo"
		></Route>
		<Route component={CampaignPlaza}
					 exact
					 path="/home/campaignPlaza"
		></Route>
		<Route component={CampaignDetail}
					 exact
					 path="/home/campaignDetail/:id"
		></Route>
		<Route component={MyCase}
					 exact
					 path="/home/myCase"
		></Route>
		<Route component={CaseDetail}
					 exact
					 path="/home/caseDetail/:caseNo"
		></Route>
		<Route component={HelpCenter}
					 exact
					 path="/home/helpCenter"
		></Route>
		<Route component={LatestNews}
					 exact
					 path="/home/latestNews"
		></Route>
		{/*匹配所有以"/home"开头的路由,包括一级路由"/home",二级路由"/home/xxx",三级路由"/home/xxx/yyy"等,
		所有不识别的"/home"开头的路由,均重定向到home页*/}
		<Route>
			<Redirect to={{pathname: "/home"}}></Redirect>
		</Route>
	</Switch>
</Content>复制代码

所有不匹配路由都重定向到404页面
src/route/index.js

// 进入home页的路由拦截(根据缓存判断,有缓存则放行,在Home组件内部进入下一级路由控制,没有缓存则重定向到登录页)
const HomeRouteInterceptor = ({component: Component, ...rest}) => (
  <Route
      {...rest}
			render={props => (localStorage.getItem('IMS_INF_TOKEN') && localStorage.getItem('IMS_INF_TOKEN') !== "undefined") ? <Component {...props} /> : <Redirect to="/login"/>}
  />
);

class RouterIndex extends Component {
  render() {
    return (
      <Router>
        <Switch>
          {/*不需要登录的路由*/}
          <Route component={Land}
                 exact
                 path="/"
          ></Route>
          <Route component={Login}
              exact
              path="/login"
          ></Route>
          <Route component={Register}
              exact
              path="/register"
          ></Route>
          <Route component={RegSuccess}
                 exact
                 path="/regSuccess"
          ></Route>
          <Route component={ForgetLoginPassword}
                 exact
                 path="/forgetSendCode"
          ></Route>
          <Route component={ForgetTriggerEmailSuccess}
                 exact
                 path="/forgetTriggerEmailSuccess"
          ></Route>
          <Route component={ResetLoginPassword}
                 exact
                 path="/resetLoginPassword"
          ></Route>
          <Route component={ResetWithdrawPassword}
                 exact
                 path="/resetWithdrawPassword"
          ></Route>
          <Route component={ResetSuccess}
                 exact
                 path="/resetSuccess"
          ></Route>
          <Route component={HelpCenterFromLand}
                 exact
                 path="/helpCenter"
          ></Route>
          <Route component={NotFound}
                 exact
                 path="/notFound"
          ></Route>
          {/*进入home页后匹配的路由,匹配所有以"/home"开头的路由,
          包括一级路由"/home",二级路由"/home/xxx",三级路由"/home/xxx/yyy"等*/}
          <HomeRouteInterceptor component={Home}
              path="/home"
          ></HomeRouteInterceptor>
					{/*其他不识别的路由,最后走到这里*/}
					{/*<LastErrorRouteInterceptor/>*/}
          <Route>
            <Redirect to={{pathname: "/notFound"}}></Redirect>
          </Route>
        </Switch>
      </Router>
    );
  }
}复制代码

src/views/Home/index.js

<Content style={{padding: '0 calc(50% - 600px)'}}>
	<div style={{height: 20}}></div>
	<Switch>
		{/*不需要登录的路由*/}
		<Route component={DefaultPage}
					 exact
					 path="/home"
		></Route>
		<Route component={AccountCenter}
					 exact
					 path="/home/accountCenter"
		></Route>
		<Route component={FinancialCenter}
					 exact
					 path="/home/financialCenter"
		></Route>
		<Route component={PaymentInfo}
					 exact
					 path="/home/paymentInfo"
		></Route>
		<Route component={CampaignPlaza}
					 exact
					 path="/home/campaignPlaza"
		></Route>
		<Route component={CampaignDetail}
					 exact
					 path="/home/campaignDetail/:id"
		></Route>
		<Route component={MyCase}
					 exact
					 path="/home/myCase"
		></Route>
		<Route component={CaseDetail}
					 exact
					 path="/home/caseDetail/:caseNo"
		></Route>
		<Route component={HelpCenter}
					 exact
					 path="/home/helpCenter"
		></Route>
		<Route component={LatestNews}
					 exact
					 path="/home/latestNews"
		></Route>
		{/*匹配所有以"/home"开头的路由,包括一级路由"/home",二级路由"/home/xxx",三级路由"/home/xxx/yyy"等,
		所有不识别的"/home"开头的路由,均重定向到home页*/}
		<Route>
			<Redirect to={{pathname: "/notFound"}}></Redirect>
		</Route>
	</Switch>
</Content>复制代码

src/containers/NotFound/index.js

render() {
    return (
			<div className="not-found-wrapper">
				<div className="not-found">
					<Result
						status="404"
						title="404"
						subTitle="Sorry, the page you visited does not exist."
						extra={<Button type="primary" onClick={this.clickToDefaultPath}>Back Home</Button>}
					/>
				</div>
			</div>

    );
  }复制代码

src/containers/NotFound/index.less

.not-found-wrapper {
  .not-found {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
}复制代码


分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改