我已经很久没有收到这个错误了,我也不知道如何解决这个问题
PrivateRoute组件,在使用mapstatetoprops时会从存储中获取未定义的值
import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';
export const PrivateRoute = ({ isAuthenticated, component: Component, ...rest}) => (
<Route {...rest} component={(props) => (
isAuthenticated ? (
<Component {...props} />
) : (
<Redirect to="/" />
)
)} />
);
const mapStateToProps = (state) => {
return {
isAuthenticated: !!state.auth.uname
};
};
export default connect(mapStateToProps)(PrivateRoute);
AppRouter组件,该组件使用PrivateRoute隐藏一些秘密路由以防止未经授权的访问。
import React from 'react';
import { Router, Route, Switch} from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import Nav from '../components/navigation/nav';
import Index from '../components/index';
import SignIn from '../components/signin/signin';
import Register from '../components/register/register';
import Home from '../components/home/home';
import { PrivateRoute } from './PrivateRoute';
export const history = createHistory();
const AppRouter = () => {
return(
<Router history={history}>
<div>
<Nav />
<Switch>
<Route exact path='/' component={Index} />
<Route path='/signin' component={SignIn}/>
<Route path='/register' component={Register}/>
<PrivateRoute path='/home' component={Home}/>
</Switch>
</div>
</Router>
);
}
export default AppRouter;
提供者中的Index.js包装存储
import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { Provider } from 'react-redux';
import 'tachyons';
import './index.css';
import App from './App';
import configureStore from './store/configStore';
import * as serviceWorker from './serviceWorker';
const store = configureStore();
const jsx = (
<Provider store={store}>
<App />
</Provider>
)
ReactDOM.render(jsx, document.getElementById('root'));
serviceWorker.unregister();
Auth Reducer
const INIIAL_STATE = {isLoginSuccess: true, uname: '' }
export default (state = INIIAL_STATE, action) => {
switch (action.type) {
case 'LOGIN':
return {
uname: action.uname
};
case 'LOGIN_SUCCESS':
return {
isLoginSuccess: action.isLoginSuccess
};
case 'LOGOUT':
return {};
default:
return state;
}
};
动作创建者
import configureStore from '../store/configStore';
import { history } from '../routers/AppRouter';
const store = configureStore();
export const setLoginSuccess = (isLoginSuccess) => {
return {
type: 'LOGIN_SUCCESS',
isLoginSuccess
};
}
export const login = (uname) => {
return{
type: 'LOGIN',
uname
};
}
export const logout = () => {
return{
type: 'LOGOUT'
};
}
export const startLogin = (username, password) => {
return() => {
fetch('http://localhost:3000/signin' , {
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
username: username,
password: password
})
}).then(response => response.json())
.then(
user => {
if(user) {
store.dispatch(login(user.username));
store.dispatch(setLoginSuccess(true));
if(history.location.pathname === '/signin')
{
history.push('/home');
}
}
})
.catch(err => {console.log(err)});
}
}