使用react路由器设置专用路由

Question

我正在尝试使用react router dom为未经授权的用户设置一个登录屏幕，并为授权用户设置面板。

例如，每当用户单击侧边栏中的链接时，就会发生路线更改(仪表板路线(。仪表板组件内部的useEffect被调用，它获取我已经拥有的数据。

## ROUTES ##
export const appRoutes = auth => [
{
path: '/',
component: () => auth ? <Redirect to='/dashboard' /> :<Login/>,
exact: true
},
{
path: '/dashboard',
component: Guilds ## REDIRECTS TO THE NEXT ROUTE WITH ID ##,
exact: true,
private: true
},
{
path: '/dashboard/:id',
component: Dashboard,
private: true
},
{
path: '/dashboard/*',
component: Dashboard,
private: true
}
]
export const dashboardRoutes = [
{
path: '/dashboard/:id',
component: Home,
exact: true
}
]
## SIMPLIFIED APP COMPONENT ##
export default function App() {
return (
<ThemeProvider theme={theme}>
<BrowserRouter>
<Switch>
{appRoutes(auth).map(value => {
if(value.private) return <PrivateRoute path={value.path} component={value.component} exact={value.exact} key={value.path} auth={auth} />;
else return <Route path={value.path} component={value.component} exact={value.exact} key={value.path} />;
})}
</Switch>
</BrowserRouter>
</ThemeProvider>
)
}
## SIMPLIFIED DASHBOARD COMPONENT ## 
export default function Dashboard({ match }) {
const [guild, setGuild] = useState(null);
const [user, setUser] = useState(null);
useEffect(() => {
getGuild(match.params.id)
.then(res => {
setGuild(res.data);
return getUser();
})
.then(res => {
setUser(res.data);
})
.catch(err => {
console.log(err);
})
}, [match.params.id]);
return (
<div className={classes.root}>
<Header onToggleDrawer={onToggleDrawer} guild={guild} auth />
<SideBar onToggleDrawer={onToggleDrawer} isOpen={drawerOpen} user={user} />
<div className={classes.content}>
<div className={classes.toolbar} />
<div className={classes.contentContainer}>
{dashboardRoutes.map(value => {
return <Route exact={value.exact} path={value.path} component={value.component} key={value.path}/>
})}
</div>
</div>
</div>
)
}
## PRIVATE ROUTE COMPONENT ##
export const PrivateRoute = ({ component: Component, auth, ...rest }) => {
return (
<Route {...rest} render={(props) => (
auth
? <Component {...props} />
: <Redirect to='/' />
)} />
)
}

我不确定我是否正确处理了这种情况，但任何帮助都会很好。我认为，如果用户从书签进入网站，就会调用该函数，但如果有人能提供一些线索，那就太酷了。

谢谢。

Answer 1

获取发生多次的原因是useEffect的依赖数组。我假设match.params.id在用户点击时发生了变化，然后它改变了将再次触发提取的路由。

可能的解决方案：

1.空依赖数组：

一种可能的解决方案是，如果只想在数据设置为空时提取useEffect的依赖数组。来自文件：

如果您想运行一个效果并只清理一次(在装载和卸载时(，可以传递一个空数组([](作为第二个参数。这告诉React，你的效果不依赖于道具或状态的任何值，所以它永远不需要重新运行。

因此，如果您有以下内容，它将只运行一次：

useEffect(() => {
// this part runs only once
}, []); // empty dependency array

2.检查提取是否已经发生：

我想的另一个解决方案是检查guild变量中是否已经有值，如下所示：

useEffect(() => {
// no value presented for guild
if (guild === null) {
// code which is running the fetch part
}
}, [match.params.id]);

我希望这能给你一个想法和帮助！