Struggling for passing React routing param - reactjs

Question

I'd like to protect a react route and redirect toward this route when the user has logged in.
Here is my protectedRoute :
const ProtectedRoute = () => {
const location = useLocation();
return auth.getCurrentUser() ? <Outlet /> :
<Navigate to="/login" state={{from: location}}/>
};
And here is my Login component :
class LoginForm extends Form {
state = {
data: { username: "", password: "" },
errors: {}
};
schema = {
username: Joi.string()
.required()
.label("Username"),
password: Joi.string()
.required()
.label("Password")
};
doSubmit = () => {
// Some code for validate login
const { state } = this.props.location;
window.location = state ? state.from.pathname : "/";
};
render() {
if (auth.getCurrentUser()) return <Navigate to="/" />;
return (
<div>
<h1>Login</h1>
<form onSubmit={this.handleSubmit}>
{this.renderInput("username", "Username")}
{this.renderInput("password", "Password", "password")}
{this.renderButton("Login")}
</form>
</div>
);
}
}
The program stops at doSubmit function when executing :
const { state } = this.props.location;
What do I do wrong ?

Answer 1

Issue
In react-router-dom v6 the Route components no longer have route props (history, location, and match), and the current solution is to use the React hooks "versions" of these to use within the components being rendered. React hooks can't be used in class components though.
To access the location object with a class component you must either convert to a function component, or roll your own custom withRouter Higher Order Component to inject the "route props" like the withRouter HOC from react-router-dom v5.x did.
Also, in v6 the history object was replaced by a navigate function. This can be accessed via React hook and injected as a prop as well.
Solution
I won't cover converting a class component to function component. Here's an example custom withRouter HOC:
import { useLocation, useNavigate } from 'react-router-dom';
const withRouter = WrappedComponent => props => {
const location = useLocation();
const navigate = useNavigate();
// etc... other react-router-dom v6 hooks
return (
<WrappedComponent
{...props}
location={location}
navigate={navigate}
// etc...
/>
);
};
And decorate the LoginForm component with the new HOC.
export default withRouter(LoginForm);
This will inject a location prop for the class component.
doSubmit = () => {
const { location, navigate } = this.props;
// Some code for validate login
const { state } = location;
navigate(state.from || "/", { replace: true });
};