V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Smash
V2EX  ›  程序员

求一个 React Router 路由守卫的现成轮子

  •  
  •   Smash · 2021-07-26 23:13:52 +08:00 · 2303 次点击
    这是一个创建于 1202 天前的主题,其中的信息可能已经有所发展或是发生改变。

    第一次写 React,官方的路由没有封装守卫

    由于路由这块我还不是很熟悉,求一个现成的轮子.

    第 1 条附言  ·  2021-07-27 09:20:30 +08:00
    去 github 转了一圈,发现也没有封装得太好的,行了, 我自己封装.
    7 条回复    2021-07-27 11:20:13 +08:00
    shilianmlxg
        1
    shilianmlxg  
       2021-07-27 00:15:47 +08:00
    如果是 hooks 是有轮子的 useRouter
    如果不是 那我也蹲一个
    ericgui
        2
    ericgui  
       2021-07-27 06:05:07 +08:00
    似乎是没有的
    Yvette
        3
    Yvette  
       2021-07-27 07:12:53 +08:00
    SmiteChow
        4
    SmiteChow  
       2021-07-27 09:13:51 +08:00
    这玩意自己写不就几行代码么?

    ```app.jsx
    import styles from '../css/app.cssm' assert { type: "css" }
    import SideBar from './side-bar.jsx';
    import ZYTable from './zy-table.jsx';
    import BatchOperateZY from './batch-operate-zy.jsx';

    const tabs = {
    table: '资源管理',
    batch: '批量操作',
    };

    export default function App(props) {
    let hash = location.hash;
    const [tab, setTab] = React.useState(hash === '' ? 'table' : hash.substr(1));

    React.useEffect(() => {
    document.title = `ZYMS 画廊 - ${tabs[tab]}`
    document.location.hash = `#${tab}`
    }, [tab])

    return <div className={styles.flex}>
    <SideBar tabs={tabs} tabName={tab} showTab={(name) => setTab(name)}/>
    <div className={`${styles['tab-container']}`}>
    {tab === 'table' && <ZYTable/>}
    {tab === 'batch' && <BatchOperateZY/>}
    </div>
    </div>
    }
    ```
    Smash
        5
    Smash  
    OP
       2021-07-27 10:16:55 +08:00
    @SmiteChow 我想做成统一配置类似 Vue,配置路由 React Router 支持,但是在配置路由上的守卫需要自己实现.

    你的示例分散在各个 component 中,不方便管理和维护.
    Carseason
        6
    Carseason  
       2021-07-27 10:17:15 +08:00
    hooks 的 Router 组件有个 render 的钩子来实现
    Smash
        7
    Smash  
    OP
       2021-07-27 11:20:13 +08:00
    @Carseason 谢谢,已经在文档看到了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1126 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 23:39 · PVG 07:39 · LAX 15:39 · JFK 18:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.