React Router V4 使用 Redux-persist 和 React-snapshot 保护私有路由

React Router V4 使用 Redux-persist 和 React-snapshot 保护私有路由

npm install react-router-dom redux-persist react-snapshot

javascript
import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { createBrowserHistory } from 'history';
import { Router as SnapshotRouter } from 'react-snapshot';
import Home from './components/Home';
import Dashboard from './components/Dashboard';
import Login from './components/Login';
const history = createBrowserHistory();
const PrivateRoute = ({ component: Component, authenticated, ...rest }) => (
      {...rest}
    render={props =>
      authenticated === true ? (
        
      ) : (
        
      )
    }
  />
);
const App = ({ authenticated }) => (
  
    
      
        
          
          
                      path="/dashboard"
            authenticated={authenticated}
            component={Dashboard}
          />
        
      
    
  
);
const mapStateToProps = state => ({
  authenticated: state.auth.authenticated
});
export default connect(mapStateToProps)(App);

javascript
import React from 'react';
const Home = () => (
  
    
Home
    
Welcome to the home page!
  
);
export default Home;

javascript
import React from 'react';
const Dashboard = () => (
  
    
Dashboard
    
Welcome to the dashboard!
  
);
export default Dashboard;

javascript
import React from 'react';
const Login = () => (
  
    
Login
    
Please login to access the dashboard.
  
);
export default Login;

npm start