私有路由不起作用，响应路由更改 v5 - v6.2

Question

由于React路由从v5更改为v6.2，我的代码无法工作。你能帮我更改PrivateRoute.js的详细信息以符合v6.2的要求吗？

PrivateRoute.js；strong文本

import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
const PrivateRoute = ({ component: Component, auth: { isAuthenticated, loading }, ...rest }) => (
<Route
{...rest}
render={props => !isAuthenticated && !loading ? (<Redirect to='/login' />) : (<Component {...props} />)}
/>
);
PrivateRoute.propTypes = {
auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);

我发现了一些变化：重定向到导航。此外，我将App.js中的路由更改为；

function App() {
return (
<Provider store={store}>
<Router>
<Layout>
<Routes>
<Route path='/' element={<WelcomePage/>} />
<Route path='/home' element={<Home/>} />
<Route element={<PrivateRoute/>}>
<Route path='/about' element={<About/>} />
</Route>
<Route path='*' element={<NotFound/>} />
</Routes>
</Layout>
</Router>
</Provider>
);
}
export default App;

下面的是经过编辑的，但我仍然没有呈现关于页面。相反，我被重定向到登录；

import React from 'react';
import { Outlet, Navigate } from 'react-router-dom';
const PrivateOutlet = ({isAuthenticated}) => {
if(isAuthenticated ) { 
return  <Outlet /> 
}
else {
return <Navigate to='login'/> //Go to login
}};

export default PrivateOutlet;

Answer 1

您需要首先渲染Route组件，然后检查auth并渲染其中的outlet。outlet是嵌套的路由。重定向已重命名为导航，您不再需要将任何道具传递到路线。

const PrivateOutlet = () => {
if(isAuthenticated && loading) {
return <Outlet />
}
else {
return <Navigate to='login'/>
}
};
//...
<Route  path='/about' element={<PrivateOutlet/>}>
<Route index element={<About/>} /> //Rendered as outlet component
<Route path='me' element={<About/>} /> //Rendered as outlet component
</Route>

编辑：完整代码

PrivateOutlets.js

import React, { Component } from 'react';
import { Route, Outlet, Navigate } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
//Never used redux or proptypes, so make sure auth is passed correctly
const PrivateOutlet = ({auth}) => {
if(auth.isAuthenticated && auth.loading) { //Check for auth here
return  <Outlet /> //Render the current page
}
else {
return <Navigate to='login'/> //Go to login
}};
PrivateRoute.propTypes = {
auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);

App.js

function App() {
return (
<Provider store={store}>
<Router>
<Layout>
<Routes>
<Route path='/' element={<WelcomePage/>} />
<Route path='/home' element={<Home/>} />
//If this doesn't work, try the other one
<Route element={<PrivateOutlet/>}>
<Route path='/about' element={<About/>} />
</Route>
<Route path='/about' element={<PrivateOutlet/>}>
<Route index element={<About/>} /> //This will get rendered as Outlet
//<Route path='me' element={<About/>} /> //Add more nested routes like this. without "/"
</Route>
<Route path='*' element={<NotFound/>} />
</Routes>
</Layout>
</Router>
</Provider>
);
}