dva/router#Redirect JavaScript Examples

The following examples show how to use dva/router#Redirect. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js    From hzero-front with Apache License 2.0 6 votes vote down vote up
render() {
    const { routerData, menu = [], activeTabKey, tabs } = this.props;
    const redirectData = this.getRedirectData(menu);
    const bashRedirect = this.getBashRedirect();

    const layout = (
      <Layout style={{ height: '100vh', overflow: 'hidden' }}>
        <Switch>
          {map(redirectData, (item) => (
            <Redirect key={item.from} exact from={item.from} to={item.to} />
          ))}
          {bashRedirect ? <Redirect exact from="/" to={bashRedirect} /> : null}
          {menu.length === 0 ? null : <Route render={EMPTY_ROUTE} />}
        </Switch>
        {map(tabs, (pane) => (
          <Content
            key={pane.key}
            className="page-container"
            style={activeTabKey === pane.key ? showStyle : hiddenStyle}
          >
            {getRoutesContainsSelf(pane.key, routerData).map((item) => (
              <Route
                key={item.key}
                path={item.path}
                exact={item.exact}
                component={item.component}
              />
            ))}
            {/* {menu.length === 0 ? null : <Route render={NotFound} />} */}
          </Content>
        ))}
      </Layout>
    );

    return <DocumentTitle>{layout}</DocumentTitle>;
  }
Example #2
Source File: index.js    From hzero-front with Apache License 2.0 6 votes vote down vote up
render() {
    const { routerData, menu = [], activeTabKey, tabs, currentUser = {} } = this.props;

    const redirectData = this.getRedirectData(menu);
    const bashRedirect = this.getBashRedirect();

    const layout = (
      <Layout style={{ height: '100vh', overflow: 'hidden' }}>
        <Switch>
          {map(redirectData, (item) => (
            <Redirect key={item.from} exact from={item.from} to={item.to} />
          ))}
          {bashRedirect ? <Redirect exact from="/" to={bashRedirect} /> : null}
          {menu.length === 0 ? null : <Route render={EMPTY_ROUTE} />}
        </Switch>
        {map(tabs, (pane) => (
          <Content
            key={pane.key}
            className="page-container"
            style={activeTabKey === pane.key ? showStyle : hiddenStyle}
          >
            {getRoutesContainsSelf(pane.key, routerData).map((item) => (
              <Route
                key={item.key}
                path={item.path}
                exact={item.exact}
                component={item.component}
              />
            ))}
            {/* {menu.length === 0 ? null : <Route render={NotFound} />} */}
          </Content>
        ))}
      </Layout>
    );

    return <DocumentTitle title={currentUser.title || ''}>{layout}</DocumentTitle>;
  }
Example #3
Source File: index.js    From hzero-front with Apache License 2.0 6 votes vote down vote up
render() {
    const { match, routerData } = this.props;
    const routes = getRoutes(match.path, routerData);
    return (
      <Switch>
        {routes.map(item => (
          <Route key={item.key} path={item.path} component={item.component} exact={item.exact} />
        ))}
        {routes.length > 0 ? (
          <Redirect key={match.path} exact from={match.path} to={routes[0].path} />
        ) : null}
      </Switch>
    );
  }
Example #4
Source File: index.js    From hzero-front with Apache License 2.0 6 votes vote down vote up
render() {
    const { match, routerData } = this.props;
    const routes = getRoutes(match.path, routerData);
    return (
      <Switch>
        {routes.map(item => (
          <Route key={item.key} path={item.path} component={item.component} exact={item.exact} />
        ))}
        {routes.length > 0 ? (
          <Redirect key={match.path} exact from={match.path} to={routes[0].path} />
        ) : null}
      </Switch>
    );
  }
Example #5
Source File: index.js    From hzero-front with Apache License 2.0 6 votes vote down vote up
render() {
    const { match, routerData } = this.props;
    const routes = getRoutes(match.path, routerData);
    return (
      <Switch>
        {routes.map((item) => (
          <Route key={item.key} path={item.path} component={item.component} exact={item.exact} />
        ))}
        {routes.length > 0 ? (
          <Redirect key={match.path} exact from={match.path} to={routes[0].path} />
        ) : null}
      </Switch>
    );
  }
Example #6
Source File: PubLayout.js    From hzero-front with Apache License 2.0 5 votes vote down vote up
render() {
    const {
      currentUser,
      // collapsed,
      routerData,
      menu = [],
      activeTabKey,
      tabs,
    } = this.props;

    const redirectData = this.getRedirectData(menu);

    const bashRedirect = this.getBashRedirect();

    const layout = (
      <Layout style={{ height: '100vh', overflow: 'hidden' }}>
        <Switch>
          {map(redirectData, (item) => (
            <Redirect key={item.from} exact from={item.from} to={item.to} />
          ))}
          {bashRedirect ? <Redirect exact from="/" to={bashRedirect} /> : null}
          {menu.length === 0 ? null : <Route render={EMPTY_ROUTE} />}
        </Switch>
        {map(
          tabs,
          (pane) =>
            activeTabKey === pane.key && (
              <Content key={pane.key} className="page-container" style={showStyle}>
                {getTabRoutes({
                  pane,
                  routerData,
                  NotFound,
                  menu,
                  activeTabKey,
                })}
              </Content>
            )
        )}
      </Layout>
    );

    return <DocumentTitle title={currentUser.title || ''}>{layout}</DocumentTitle>;
  }
Example #7
Source File: index.js    From hzero-front with Apache License 2.0 4 votes vote down vote up
render() {
    const {
      activeTabKey, // 当前激活的 Tab 的 key
      language, // 当前的语言
      NotFound = DefaultNotFound, // 当找不到路由时返回的路由
      tabs = [], // 所有打开的 tabs
      menu = [], // 所有的菜单
      layoutLoading,
      pathname,
      routerData = {}, // 所有的路由
      extraRight = null, // 右侧额外的组件
    } = this.props;
    if (layoutLoading) {
      return (
        <div style={{ textAlign: 'center' }}>
          <Spin size="large" />
        </div>
      );
    }
    const { contextMenuVisibleKey, contextMenuVisible = false } = this.state;
    const redirectData = this.getRedirectData(menu);
    const bashRedirect = this.getBaseRedirect();

    return (
      <>
        <Switch>
          {map(redirectData, (item) => (
            <Redirect key={item.from} exact from={item.from} to={item.to} />
          ))}
          {bashRedirect ? <Redirect exact from="/" to={bashRedirect} /> : null}
          {menu.length === 0 ? null : <Route render={EMPTY_ROUTE} />}
        </Switch>
        <Tabs
          hideAdd
          onChange={this.onTabChange}
          activeKey={activeTabKey}
          type="editable-card"
          onEdit={this.onTabEdit}
          tabBarExtraContent={extraRight}
          className={styles['menu-tabs']}
        >
          {map(tabs, (pane, index) => (
            <TabPane
              closable={pane.closable}
              tab={
                <Popover
                  overlayClassName="default-menu-tabs-context-menu"
                  content={
                    <List size="small">
                      {(tabs.length > 2 || pane.key === '/workplace') && tabs.length !== 1 && (
                        <List.Item
                          onClick={(e) => {
                            this.handleMenuTabCloseOthers(pane, e);
                          }}
                          className="default-menu-tabs-context-menu-item"
                        >
                          <Icons
                            type="close-other"
                            size={14}
                            className="default-menu-tabs-context-menu-item-icon"
                          />
                          <span className="default-menu-tabs-context-menu-item-text">
                            {intl.get('hzero.common.button.closeOther').d('关闭其他')}
                          </span>
                        </List.Item>
                      )}
                      {pane.key !== '/workplace' && index !== 1 && (
                        <List.Item
                          onClick={(e) => {
                            this.handleMenuTabCloseLeft(pane, e);
                          }}
                          className="default-menu-tabs-context-menu-item"
                        >
                          <Icons
                            type="close-all"
                            size={14}
                            className="default-menu-tabs-context-menu-item-icon"
                          />
                          <span className="default-menu-tabs-context-menu-item-text">
                            {intl.get('hzero.common.button.closeLeft').d('关闭左侧')}
                          </span>
                        </List.Item>
                      )}
                      {tabs.length - 1 !== index && (
                        <List.Item
                          onClick={(e) => {
                            this.handleMenuTabCloseRight(pane, e);
                          }}
                          className="default-menu-tabs-context-menu-item"
                        >
                          <Icons
                            type="close-all"
                            size={14}
                            className="default-menu-tabs-context-menu-item-icon"
                          />
                          <span className="default-menu-tabs-context-menu-item-text">
                            {intl.get('hzero.common.button.closeRight').d('关闭右侧')}
                          </span>
                        </List.Item>
                      )}
                      {tabs.length !== 1 && (
                        <List.Item
                          onClick={(e) => {
                            this.handleMenuTabCloseAll(pane, e);
                          }}
                          className="default-menu-tabs-context-menu-item"
                        >
                          <Icons
                            type="close-all"
                            size={14}
                            className="default-menu-tabs-context-menu-item-icon"
                          />
                          <span className="default-menu-tabs-context-menu-item-text">
                            {intl.get('hzero.common.button.closeAll').d('关闭全部')}
                          </span>
                        </List.Item>
                      )}
                      <List.Item
                        onClick={(e) => {
                          this.handleMenuTabFullScreen(pane, e);
                        }}
                        className="default-menu-tabs-context-menu-item"
                      >
                        <Icons
                          type="full-screen"
                          size={14}
                          className="default-menu-tabs-context-menu-item-icon"
                          // style={{ lineHeight: 'inherit', fontSize: '14px' }}
                        />
                        <span className="default-menu-tabs-context-menu-item-text">
                          {intl.get('hzero.common.button.fullScreen').d('全屏')}
                        </span>
                      </List.Item>
                      {pane.key === activeTabKey && (
                        <List.Item
                          onClick={(e) => {
                            this.handleMenuTabRefresh(pane, e);
                          }}
                          className="default-menu-tabs-context-menu-item"
                        >
                          <Icons
                            type="refresh"
                            size={14}
                            className="default-menu-tabs-context-menu-item-icon"
                          />
                          <span className="default-menu-tabs-context-menu-item-text">
                            {intl.get('hzero.common.button.refresh').d('刷新')}
                          </span>
                        </List.Item>
                      )}
                    </List>
                  }
                  title={null}
                  trigger="contextMenu"
                  visible={pane.key === contextMenuVisibleKey && contextMenuVisible}
                  onVisibleChange={(visible) => {
                    this.handleContextMenuTrigger(pane, visible);
                  }}
                >
                  {pane.path === '/workplace' ? (
                    <span>
                      <Icon type={pane.icon} key="icon" />
                      {language ? pane.title && intl.get(pane.title).d(pane.title) : '...'}
                    </span>
                  ) : (
                    <span>
                      {language ? pane.title && intl.get(pane.title).d(pane.title) : '...'}
                    </span>
                  )}
                </Popover>
              }
              key={pane.key}
            >
              <Content className="page-container" key={this.refreshKeyMap.get(pane.key)}>
                {getTabRoutes({
                  pane,
                  routerData,
                  NotFound,
                  pathname,
                  menu,
                  activeTabKey,
                })}
              </Content>
            </TabPane>
          ))}
        </Tabs>
      </>
    );
  }
Example #8
Source File: index.js    From hzero-front with Apache License 2.0 4 votes vote down vote up
render() {
    const { routerData, match, location } = this.props;
    const { commonSourceCode, commonExternalSystemCode } = this.state;
    const { path } = match;
    const hpfmLeftRouter = {
      '/hpfm/org-info/company': intl.get('hpfm.orgInfo.view.message.route.company').d('公司'),
      '/hpfm/org-info/operation-unit': intl
        .get('hpfm.orgInfo.view.message.route.operationUnit')
        .d('业务实体'),
      '/hpfm/org-info/inventory-org': intl
        .get('hpfm.orgInfo.view.message.route.inventoryOrg')
        .d('库存组织'),
      '/hpfm/org-info/store-room': intl.get('hpfm.orgInfo.view.message.route.storeRoom').d('库房'),
      '/hpfm/org-info/library-position': intl
        .get('hpfm.orgInfo.view.message.route.libraryPosition')
        .d('库位'),
    };
    const spfmLeftRouter = {
      '/spfm/org-info/company': intl.get('hpfm.orgInfo.view.message.route.company').d('公司'),
      '/spfm/org-info/operation-unit': intl
        .get('hpfm.orgInfo.view.message.route.operationUnit')
        .d('业务实体'),
      '/spfm/org-info/inventory-org': intl
        .get('hpfm.orgInfo.view.message.route.inventoryOrg')
        .d('库存组织'),
      '/spfm/org-info/store-room': intl.get('hpfm.orgInfo.view.message.route.storeRoom').d('库房'),
      '/spfm/org-info/library-position': intl
        .get('hpfm.orgInfo.view.message.route.libraryPosition')
        .d('库位'),
    };
    return (
      <React.Fragment>
        <Content className={style['org-info']} noCard>
          <div className={style['org-info-left']}>
            <div
              className={classNames({
                [style['orgchart-item']]: true,
                [style['orgchart-light']]:
                  location.pathname.includes('group') || location.pathname === '/hpfm/org-info',
              })}
            >
              <Link
                to={`/${path.includes('spfm') ? 'spfm' : 'hpfm'}/org-info/group`}
                className={style.link}
              >
                {intl.get('hpfm.orgInfo.view.message.route.group').d('集团')}
              </Link>
            </div>
            <Divider dashed type="vertical" className={style.divider} />
            <div className={style['divider-horizontal']} />
            <div className={style.orgchart}>
              <div style={{ width: '100px' }}>
                {Object.keys(path.includes('spfm') ? spfmLeftRouter : hpfmLeftRouter).map(
                  (item, index) => {
                    return (
                      <React.Fragment key={item}>
                        {index !== 0 && (
                          <Divider dashed type="vertical" className={style.divider} />
                        )}
                        <div
                          className={classNames({
                            [style['orgchart-item']]: true,
                            [style['orgchart-light']]: location.pathname.includes(item),
                          })}
                        >
                          <Link to={item} className={style.link}>
                            {path.includes('spfm') ? spfmLeftRouter[item] : hpfmLeftRouter[item]}
                          </Link>
                        </div>
                      </React.Fragment>
                    );
                  }
                )}
              </div>
              <div style={{ width: 100 }}>
                <div
                  className={classNames({
                    [style['orgchart-item']]: true,
                    [style['orgchart-light']]: location.pathname.includes('purchase-org'),
                  })}
                >
                  <Link
                    to={`/${path.includes('spfm') ? 'spfm' : 'hpfm'}/org-info/purchase-org`}
                    className={style.link}
                  >
                    {intl.get('hpfm.orgInfo.view.message.route.purchaseOrg').d('采购组织')}
                  </Link>
                </div>
                <Divider type="vertical" className={style.divider} />
                <div
                  className={classNames({
                    [style['orgchart-item']]: true,
                    [style['orgchart-light']]: location.pathname.includes('purchase-agent'),
                  })}
                >
                  <Link
                    to={`/${path.includes('spfm') ? 'spfm' : 'hpfm'}/org-info/purchase-agent`}
                    className={style.link}
                  >
                    {intl.get('hpfm.orgInfo.view.message.route.purchaseAgent').d('采购员')}
                  </Link>
                </div>
              </div>
            </div>
          </div>
          <div className={style['org-info-right']}>
            <Switch>
              {getRoutes(match.path, routerData).map(item => {
                const InfoComp = item.component;
                return (
                  <Route
                    key={item.key}
                    path={item.path}
                    render={props => (
                      <InfoComp
                        {...props}
                        key={item.key}
                        commonSourceCode={commonSourceCode}
                        commonExternalSystemCode={commonExternalSystemCode}
                      />
                    )}
                    exact={item.exact}
                  />
                );
              })}
              <Redirect
                form={`/${path.includes('spfm') ? 'spfm' : 'hpfm'}/org-info`}
                to={`/${path.includes('spfm') ? 'spfm' : 'hpfm'}/org-info/group`}
              />
            </Switch>
          </div>
        </Content>
      </React.Fragment>
    );
  }