React精细化路由管理

okfantasy
264 阅读4分钟


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%);
  }
}


avatar
文章
阅读
粉丝