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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1207 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

第 1 条附言 · 2021-07-27 09:20:30 +08:00

去 github 转了一圈,发现也没有封装得太好的,行了, 我自己封装.

React

轮子

守卫

现成

7 条回复 • 2021-07-27 11:20:13 +08:00

shilianmlxg

2021-07-27 00:15:47 +08:00

如果是 hooks 是有轮子的 useRouter
如果不是那我也蹲一个

ericgui

2021-07-27 06:05:07 +08:00

似乎是没有的

Yvette

2021-07-27 07:12:53 +08:00

https://reactrouter.com/web/example/auth-workflow

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

2021-07-27 10:16:55 +08:00

@SmiteChow 我想做成统一配置类似 Vue,配置路由 React Router 支持,但是在配置路由上的守卫需要自己实现.

你的示例分散在各个 component 中,不方便管理和维护.

Carseason

2021-07-27 10:17:15 +08:00

hooks 的 Router 组件有个 render 的钩子来实现

Smash

2021-07-27 11:20:13 +08:00

@Carseason 谢谢,已经在文档看到了