react-router#Outlet TypeScript Examples

The following examples show how to use react-router#Outlet. 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.tsx    From shippo with MIT License 6 votes vote down vote up 
Home = () => {
  const history = useNavigate()
  const location = useLocation()
  console.log(location)

  const [selectedTab, setSelectedTab] = useState(
    tabBarItems.find((item) => item.path === location.pathname)!.path
  )

  const onPress = (activeKey: string) => {
    setSelectedTab(activeKey)
    const path = tabBarItems.find((item) => item.path === activeKey)?.path
    path && history(path)
  }

  return (
    <Container direction="vertical">
      <Main>
        <Outlet />
      </Main>
      <Footer height="50px" style={{ backgroundColor: '#fff' }}>
        <StyledTabBar activeKey={selectedTab} onChange={(activeKey) => onPress(activeKey)}>
          {tabBarItems.map((item) => (
            <TabBar.Item title={item.title} key={item.path} icon={<Icon type={item.icon} />} />
          ))}
        </StyledTabBar>
      </Footer>
    </Container>
  )
}
Example #2
Source File: App.tsx    From axios-source-analysis with MIT License 6 votes vote down vote up 
function Layout() {
  debugger
  return (
    <>
     <p>主页面</p>
      <ul>
        {
          routeConfigs.map(({ path }) => {
            if (path === '*') return null
            return (
              <li key={path}>
                <Link to={`/${path}`}>{path}</Link>
              </li>
            )
          })
        }
      </ul>
      <hr />
      <Outlet />
    </>
  )
}
Example #3
Source File: App.tsx    From contracts-ui with GNU General Public License v3.0 6 votes vote down vote up 
App = (): JSX.Element => {
  return (
    <ThemeContextProvider>
      <ApiContextProvider>
        <DatabaseContextProvider>
          <TransactionsContextProvider>
            <div className="relative md:fixed flex min-h-screen inset-0 overflow-hidden dark:bg-gray-900 dark:text-white text-black">
              <Sidebar />
              <AwaitApis>
                <Outlet />
              </AwaitApis>
            </div>
          </TransactionsContextProvider>
        </DatabaseContextProvider>
      </ApiContextProvider>
    </ThemeContextProvider>
  );
}
Example #4
Source File: CatalogEntityPage.tsx    From backstage with Apache License 2.0 5 votes vote down vote up 
/** @public */
export function CatalogEntityPage() {
  return (
    <AsyncEntityProvider {...useEntityFromUrl()}>
      <Outlet />
    </AsyncEntityProvider>
  );
}
Example #5
Source File: index.tsx    From shippo with MIT License 4 votes vote down vote up 
Home = () => {
  const [collapsed, setCollapsed] = useState(false)
  const location = useLocation()
  const history = useNavigate()

  return (
    <Layout>
      <div
        style={{
          width: collapsed ? 48 : 200,
          overflow: 'hidden',
          flex: `0 0 ${collapsed ? 48 : 200}px`,
          maxWidth: collapsed ? 48 : 200,
          minWidth: collapsed ? 48 : 200,
          transition: `background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)`,
        }}
      />
      <StyledSider
        collapsed={collapsed}
        style={{
          overflow: 'hidden',
        }}
        collapsedWidth={48}
        width={200}
      >
        <StyledLogo
          className="logo"
          style={{
            padding: collapsed ? '16px 8px' : '16px',
          }}
        >
          <img src={avatar} alt="" />
          {collapsed ? null : <h1>Shippo Admin</h1>}
        </StyledLogo>
        <div
          style={{
            flex: '1 1 0%',
            overflow: 'hidden auto',
          }}
        >
          <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={[location.pathname]}
            style={{
              minHeight: '100%',
            }}
            onSelect={({ key }) => {
              if (key[0] !== '/') return
              console.log(key)
              history(key)
            }}
          >
            <Menu.Item key="/dashboard" icon={<UserOutlined />}>
              仪表盘
            </Menu.Item>
            <Menu.Item key="/users" icon={<UserOutlined />}>
              用户管理
            </Menu.Item>
            <SubMenu key="/permission" icon={<UserOutlined />} title="权限管理">
              <Menu.Item key="/permission/role">角色设置</Menu.Item>
              <Menu.Item key="/permission/policy">权限策略设置</Menu.Item>
              <Menu.Item key="/permission/access">访问规则设置</Menu.Item>
            </SubMenu>
            <Menu.Item key="4" icon={<UserOutlined />}>
              个人设置
            </Menu.Item>
            <Menu.Item key="5" icon={<UserOutlined />}>
              文章管理
            </Menu.Item>
            <SubMenu key="/temp" icon={<UserOutlined />} title="临时页面">
              <Menu.Item key="/temp/temp_trade_20220108">手办活动</Menu.Item>
              <Menu.Item key="3">Option 2</Menu.Item>
            </SubMenu>
          </Menu>
        </div>
        <div>
          <Menu theme="dark" mode="inline" inlineIndent={16} selectedKeys={[]} openKeys={[]}>
            <Menu.Item title={false} key="collapsed" onClick={() => setCollapsed(!collapsed)}>
              {defaultRenderCollapsedButton(collapsed)}
            </Menu.Item>
          </Menu>
        </div>
      </StyledSider>
      <Layout>
        <Header
          style={{
            height: '48px',
            backgroundColor: '#fff',
          }}
        >
          {/* <Dropdown
            overlay={
              <Menu selectedKeys={[]}>
                <Menu.Item key="center">
                  <UserOutlined />
                  个人中心
                </Menu.Item>

                <Menu.Item key="settings">
                  <UserOutlined />
                  个人设置
                </Menu.Item>

                <Menu.Divider />
                <Menu.Item key="logout">
                  <UserOutlined />
                  退出登录
                </Menu.Item>
              </Menu>
            }
          >
            <div>name</div>
          </Dropdown> */}
        </Header>
        <Content>
          <Outlet />
        </Content>
        <Footer>Footer</Footer>
      </Layout>
    </Layout>
  )
}
Example #6
Source File: index.tsx    From shippo with MIT License 4 votes vote down vote up 
Home = () => {
  const [collapsed, setCollapsed] = useState(false)
  return (
    <Layout>
      <div
        style={{
          width: collapsed ? 48 : 200,
          overflow: 'hidden',
          flex: `0 0 ${collapsed ? 48 : 200}px`,
          maxWidth: collapsed ? 48 : 200,
          minWidth: collapsed ? 48 : 200,
          transition: `background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)`,
        }}
      />
      <StyledSider
        collapsed={collapsed}
        style={{
          overflow: 'hidden',
        }}
        collapsedWidth={48}
        width={200}
      >
        <StyledLogo
          className="logo"
          style={{
            padding: collapsed ? '16px 8px' : '16px',
          }}
        >
          <img src={avatar} alt="" />
          {collapsed ? null : <h1>Shippo Admin</h1>}
        </StyledLogo>
        <div
          style={{
            flex: '1 1 0%',
            overflow: 'hidden auto',
          }}
        >
          <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={['4']}
            style={{
              minHeight: '100%',
            }}
          >
            <Menu.Item key="1" icon={<UserOutlined />}>
              仪表盘
            </Menu.Item>
            <Menu.Item key="2" icon={<UserOutlined />}>
              用户管理
            </Menu.Item>
            <Menu.Item key="3" icon={<UserOutlined />}>
              权限管理
            </Menu.Item>
            <Menu.Item key="4" icon={<UserOutlined />}>
              个人设置
            </Menu.Item>
            <Menu.Item key="5" icon={<UserOutlined />}>
              文章管理
            </Menu.Item>
          </Menu>
        </div>
        <div>
          <Menu theme="dark" mode="inline" inlineIndent={16} selectedKeys={[]} openKeys={[]}>
            <Menu.Item title={false} key="collapsed" onClick={() => setCollapsed(!collapsed)}>
              {defaultRenderCollapsedButton(collapsed)}
            </Menu.Item>
          </Menu>
        </div>
      </StyledSider>
      <Layout>
        <Header
          style={{
            height: '48px',
            backgroundColor: '#fff',
          }}
        >
          <Dropdown
            overlay={
              <Menu selectedKeys={[]}>
                <Menu.Item key="center">
                  <UserOutlined />
                  个人中心
                </Menu.Item>

                <Menu.Item key="settings">
                  <UserOutlined />
                  个人设置
                </Menu.Item>

                <Menu.Divider />
                <Menu.Item key="logout">
                  <UserOutlined />
                  退出登录
                </Menu.Item>
              </Menu>
            }
          >
            <div>name</div>
          </Dropdown>
        </Header>
        <Content>
          <Outlet />
        </Content>
        <Footer>Footer</Footer>
      </Layout>
    </Layout>
  )
}