gpt4 book ai didi

javascript - 如何使用 React Router 将路由设为私有(private)

转载 作者:行者123 更新时间:2023-12-02 21:05:54 30 4
gpt4 key购买 nike

我想将一些路由设为私有(private)以供管理员访问。成功登录后管理员可以访问该路径。但在这里我在登录时遇到问题,它重定向到错误页面

我还需要在这里做些什么才能将这条路线设为私有(private)吗?任何建议。提前致谢。

//main.js

import React, { Component } from 'react';
import {Switch, Route} from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Homepage from './user/Homepage';
import Aboutme from './user/AboutMe';
import Error from './user/Error';
import Dashboard from './admin/Dashboard';

class Main extends Component {
static propTypes = {
auth: PropTypes.object.isRequired
}


render(){
const { isAuthenticated, user } = this.props.auth;

return(
<Switch>
<Route exact path="/" component={Homepage}/>
<Route path="/about" component={Aboutme}/>
<Route component={Error}/>
{ user ? (user.is_admin === true && isAuthenticated ?
( <Route path="/dashboard" component={Dashboard}/> ) : ( <Route component={Error}/>) ): <Route component={Error}/> }

</Switch>

)
}

}

const mapStateToProps = state => ({
auth: state.auth
});

export default connect(mapStateToProps, null)(Main);

最佳答案

那是因为你有

 <Route component={Error}/>

作为switch的第三项。

Switch renders the first child or that matches the location.

由于您没有指定路径,我猜它会始终匹配,并且Switch不会使用后面的部分路由。

作为解决方案,可以将其与您重定向的路径一起使用,或者完全删除。

如果您对专用路线的不同解决方案感兴趣,请查看本文,例如:https://tylermcginnis.com/react-router-protected-routes-authentication/

关于javascript - 如何使用 React Router 将路由设为私有(private),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61229676/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com