[英]React-Router PrivateRoute is not working. What am I missing?
我的 react-redux 私有路由器無法正常工作。 它只是向我展示了我嘗試訪問的路線的空白頁面。 而且我的狀態沒有在 Redux 開發工具上加載。 會不會也是HashRouter的問題? 我的 PrivateRoute 組件:
import React from "react";
import { connect } from "react-redux";
import {Router, Redirect, withRouter } from "react-router-dom";
import PropTypes from 'prop-types';
class PrivateRoute extends React.Component {
static propTypes = {
isAuthenticated: PropTypes.bool,
}
isLoggedin = () => {
return this.props.isAuthenticated;
};
render = () => {
let { component: Component, ...rest } = this.props;
return (
<Router
{...rest}
render={(props) =>
this.isLoggedin() ? (
<Component {...props} />
) : props.location.pathname === "/" ? null : (
<Redirect to="/" />
)
}
/>
);
};
}
const mapStateToProps = (state) => ({
auth: state.auth,
isAuthenticated: state.auth.isAuthenticated
})
export default withRouter(connect(mapStateToProps, null)(PrivateRoute));
我的應用程序,我在其中包裝我的路線以使其私有:
import {Provider} from 'react-redux';
import store from './store'
import {loadUser} from './actions/authActions'
import PrivateRoute from './components/auth/PrivateRoute'
class App extends React.Component {
componentDidMount(){
store.dispatch(loadUser())
}
render(){
return (
<Provider store={store}>
<HashRouter basename="/">
<Navbar />
<Route exact path="/" component={Home}/>
<PrivateRoute path="/aeons" component={AeonsList} />
<PrivateRoute path="/carrefours" component={CarrefoursList} />
<PrivateRoute path="/farmers" component={FarmersList} />
<PrivateRoute path="/foodhalls" component={FoodhallsList} />
<PrivateRoute path="/grands" component={GrandsList} />
<PrivateRoute path="/heros" component={HerosList} />
<PrivateRoute path="/primos" component={PrimosList} />
<PrivateRoute path="/ranchos" component={RanchsList} />
</HashRouter>
</Provider>
)
}
}
export default App;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.