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

[Smash]

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

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

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

[shilianmlxg]

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

[ericgui]

似乎是没有的

[Yvette]

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

[SmiteChow]

这玩意自己写不就几行代码么？

```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]

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

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

[Carseason]

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

[Smash]

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