dva/router#Route JavaScript Examples

function RouterConfig({ history }) {
  const route = () => {
    return (
      <Fragment>
        {/* 全局样式注册到界面中 */}
        <Iconstyle></Iconstyle>
        <Globalstyle></Globalstyle>

        {/* 路由管理 */}
        <Switch>
          <Route path='/' exact component={IndexPage} />
        </Switch>
      </Fragment>
    );
  };

  return <Router history={history}>{route()}</Router>;
}

render() {
    const { component: Component, render, ...rest } = this.props;
    const { isAuthorized, isException } = this.state;
    // eslint-disable-next-line no-nested-ternary
    return isAuthorized === true ? (
      <Route {...rest} render={(props) => (Component ? <Component {...props} /> : render(props))} />
    ) : isException === true ? (
      <Exception type="500" />
    ) : null;
  }

render() {
    const { render, ...rest } = this.props;
    const { isAuthorized, isException } = this.state;
    // eslint-disable-next-line no-nested-ternary
    return isAuthorized === true ? (
      <Route {...rest} render={(props) => render(props)} />
    ) : isException === true ? (
      <Exception type="500" />
    ) : null;
  }

render() {
    const { render, ...rest } = this.props;
    const { isAuthorized, isException } = this.state;
    // eslint-disable-next-line no-nested-ternary
    return isAuthorized === true ? (
      <Route {...rest} render={(props) => render(props)} />
    ) : isException === true ? (
      <Exception type="500" />
    ) : null;
  }

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

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

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

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

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

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

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

function RouterConfig({ history, app }) {
  const [uedConfig, setUedConfig] = useState({
    Container: DefaultContainer,
  });

  const Layout = dynamicWrapper(app, ['user', 'login'], () => import('./layouts/Layout'));
  const PubLayout = dynamicWrapper(app, ['user', 'login'], () => import('./layouts/PubLayout'));

  // 免登陆无权限路由
  const PublicLayout = dynamicWrapper(app, [], () => import('./layouts/PublicLayout'));
  // 免登陆权限路由
  const PrivateLayout = dynamicWrapper(app, [], () => import('./layouts/PrivateLayout'));

  useEffect(() => {
    const ued = inject(UedProvider);
    ued.subscribe(({ Container = null }) => {
      setUedConfig({
        Container: Container || DefaultContainer,
      });
    });
  }, []);

  const layoutExtraHeader = useMemo(() => {
    return getConfig('layoutExtraHeader');
  }, []);

  // 全局系统属性
  const configureParams = useMemo(() => {
    const result = getConfig('configureParams');
    if (typeof result === 'function') {
      return result();
    }
    return result;
  }, []);

  const redirectData = useMemo(() => {
    const result = getConfig('redirectData');
    if (typeof result === 'function') {
      return result();
    }
    return result;
  }, []);

  return (
    <uedConfig.Container defaultTheme="theme2">
      <LocalProviderAsync {...configureParams}>
        <PermissionProvider>
          <ConnectedRouter history={history}>
            <>
              <ModalContainer ref={registerContainer} />
              <WithRouterC7nModalContainer />
              <Switch>
                <Route
                  path="/private"
                  render={(props) => <PrivateLayout redirectData={redirectData} {...props} />}
                />
                <Route
                  path="/public"
                  render={(props) => <PublicLayout redirectData={redirectData} {...props} />}
                />
                <PubAuthorizedRoute
                  path="/pub"
                  render={(props) => <PubLayout redirectData={redirectData} {...props} />}
                />
                <DefaultAuthorizedRoute
                  path="/"
                  render={(props) => (
                    <Layout
                      redirectData={redirectData}
                      {...props}
                      extraHeaderRight={layoutExtraHeader}
                      headerProps={{ toolbarProps: { extraHeaderRight: layoutExtraHeader } }}
                    />
                  )}
                />
              </Switch>
            </>
          </ConnectedRouter>
        </PermissionProvider>
      </LocalProviderAsync>
    </uedConfig.Container>
  );
}

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