检查用户是否在反应反应堆6中获得授权

Question

我正在使用一个YouTube教程来学习反应。他们使用的是较早版本的react-router-dom。我已经想出了如何在简单的事情上使用v6，但现在我在PrivateRoutes。我似乎想不出该改变什么。

# /src/reducers/auth.js

const initialState = {
    token: localStorage.getItem('token'),
    isAuthenticated: null,
    isLoading: false,
    user: null
};

export default function(state = initialState, action) {
    switch (action.type) {
        default:
            return state;
    }

}

# /src/reducers/index.js
mport { combineReducers } from "redux";
import leads from './leads';
import errors from './errors';
import messages from "./messages";
import auth from "./auth";

export default combineReducers({
    leads,
    errors,
    messages,
    auth,
});

// /src/common/PrivateRoute.js

import React from 'react';
import { Route, Navigate } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";

const PrivateRoute = () =>  (
//    const { user } = useAuth;
    <Navigate to='/register' />
)

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

export default (PrivateRoute);
// export default connect(mapStateToProps)(PrivateRoute);

// App.js

import PrivateRoute from './common/PrivateRoute';

<Routes>
                                <Route path="/" element={<Dashboard/>} />
                                <Route path="/login" element={<PrivateRoute><Login/></PrivateRoute>} />
                                <Route path="/register" element={<Register/>} />
                            </Routes>

如果我除了在Navigate中使用PrivateRoute之外什么都不做，它就能工作。如果我尝试使用({ children })，我会得到很多错误。

我试过关于反应堆文档的auth示例，但是我想我可能太新了，无法理解我做错了什么。

Answer 1

，您可以使用router V6来完成它。创建一个PrivateRoutes组件并添加app.js并使用它.

 // App.js
 const App: FC = () => {
  const isAuthorized = useSelector<RootState>(({auth}) => auth.user, shallowEqual)
  return (
   <>
     <BrowserRouter>
       <Routes>
         {isAuthorized ? (
           <Route path='/*' element={<PrivateRoutes />} />
         ):(
           <Route path='/login' element={<LoginPage />} />
         )}
         <Route path='error/*' element={<ErrorsPage />} />
       </Routes>
     </BrowserRouter>
   </>
 );
}
       
// /src/common/PrivateRoute.js
import React from 'react';
import { Route, Navigate } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";

const PrivateRoute = () =>  (
  const DashboardPage = lazy(() => import('../pages/Dashboard'))
  return (
      <Routes>
        <Route element={<DashboardPage />}>
      </Routes>
    );
)
export default (PrivateRoute)