6

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

 2 years ago
source link: https://www.v2ex.com/t/791940
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

V2EX  ›  程序员

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

  Smash · 13 小时 39 分钟前 · 761 次点击

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

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

第 1 条附言  ·  3 小时 33 分钟前

去 github 转了一圈,发现也没有封装得太好的,行了, 我自己封装.
7 条回复    2021-07-27 11:20:13 +08:00

shilianmlxg   12 小时 37 分钟前

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

ericgui   6 小时 48 分钟前

似乎是没有的

SmiteChow   3 小时 39 分钟前

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

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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK