We Keep Coding

Redirect in React router dom not redirecting to the given path

I have a make payment function which is called on a button click and if the user is not signed in i want to redirect that user to the signin component .
This is my code of the function.
const PaymentMethod = ()=>{
if(!isAuthenticated())
{
toast.error('Please signin to continue');
history.push('/signin') //works properly
// return <Redirect to = '/signin' /> // not working properly
}
}
// isAuthenticated is a boolean function that look whether the user is signed in or not

Try
return <Redirect to = '/signin' />
Because you have to render the Redirect to make an effect

If PaymentMethod a React component, then the history.push needs to be called in a useEffect hook with proper dependency or in a callback function as an intentional side-effect, not as an unintentional side-effect in the render body. The Redirect component would need to be returned from the component in order to have any effect.
useEffect Example to issue imperative redirect:
const PaymentMethod = () => {
const history = useHistory();
React.useEffect(() => {
if (!isAuthenticated()) {
toast.error('Please sign in to continue');
history.replace('/signin');
}
}, [history, toast]);
...
};
<Redirect> Example to issue declarative redirect:
const PaymentMethod = () => {
React.useEffect(() => {
if (!isAuthenticated()) {
toast.error('Please sign in to continue'); // <-- still a side-effect!!
}
}, [toast]);
if (!isAuthenticated()) {
return <Redirect to='/signin' />;
}
... regular JSX return ...
};
If PaymentMethod is the callback function then it must issue the imperative redirect via the history.replace function, returning JSX from an asynchronously called callback doesn't render it to the DOM. You should also not name the callback handler like it's a React function component. This is to remove any confusion.
const history = useHistory();
...
const paymentMethodHandler = () => {
if (!isAuthenticated()) {
toast.error('Please sign in to continue');
history.replace('/signin');
}
};
...

It looks like <Redirect to = '/signin' /> is a component and not a JS that can be called. Components need to be rendered in order for their JS to run.
If you for some reason want to specifically use redirect component you will have to put it into DOM on click.

you can simply use useNavigate() hook.
example
const PaymentMethod = () =>{
if(!isAuthenticated())
{
toast.error('Please signin to continue');
history.push('/signin')
useNavigate('/signin')
}
}

React router / react query does not cancel/make request on navigation - React/ typescript

In my app, I am using react-router v5 and react/typescript I have a component that uses the react-query and fetches some data. At the moment it only fetches the data when the component is rendered the first time, When navigating the request does not get cancelled and navigating back it does not make a new request. This component takes in an id parameter which fetches the data based on the id, so it needs to either refresh the component or maybe I need to add the method into the useEffect hook?
Routing component
import React from 'react';
import { BrowserRouter, Route, Switch} from 'react-router-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import { RouteComponentProps } from "react-router-dom";
import Component1 from '../Component1';
import Component2 from '../Component2';
const queryClient = new QueryClient()
const Routing: React.FunctionComponent = () => {
return (
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<Switch>
<Route exact path="/" component={Component1} />
<Route path="/details/:id" render={(props: RouteComponentProps<any>) => <Component2 {...props}/>} />
<Route component={NotFound} />
</Switch>
</BrowserRouter>
</QueryClientProvider>
)
}
export default Routing;
Component2 (id)
import React from 'react';
import { useQuery } from 'react-query';
import { RouteComponentProps, useLocation } from "react-router-dom";
interface stateType {
model: { pathname: string },
start: { pathname: string | Date }
}
const Component2: React.FunctionComponent<RouteComponentProps<any>> = (props) => {
const { state } = useLocation<stateType>();
let alertInnerId = props.match.params.id;
const fetchChart = async () => {
const res = await fetch(`/detail/${id}`);
return res.json();
};
const { data, status } = useQuery('planeInfo', fetchPlane, {
staleTime: 5000,
});
return (
<>
{status === 'error' && (
<div className="mt-5">Error fetching data!</div>
)}
{status === 'loading' && (
<div className="mt-5">Loading data ...
</div>
)}
{status === 'success' && (
{data.map(inner => {
return (
<p>{inner.id}</p>
)
})}
)}
</div>
</>
)
}
export default Component2;
In the Component 1 I am programmatically navigating:
onClick={() => history.push(`/detail/${id}}`, { model: plane.model, start: formattedStartDateTime })}>
Either way by programmatically or normal, its still the same.

[...] and navigating back it does not make a new request.
First of all, according to your code, as per the staleTime option that is set as an option on useQuery itself, the cache should invalidate every five seconds. So each time the useQuery hook is mounted (such as on route change), if five seconds have passed, a new request should be made. Your code does appear to be incomplete though as you're referencing id which appears to be undefined.
In any case, since you are requesting details of a resource with an ID, you should consider using a query key like: [planeInfo, id] instead of planeInfo alone. From the documentation:
Since query keys uniquely describe the data they are fetching, they
should include any variables you use in your query function that
change. For example:
function Todos({ todoId }) {
const result = useQuery(['todos', todoId], () =>
fetchTodoById(todoId))
}
To handle canceling the request on navigation:
You can't wrap the useQuery hook from React Query in a useEffect hook, but rather you can use use the return function of useEffect to clean up your useQuery request, effectively canceling the request when the component unmounts. With useQuery there are two ways (possibly more) to cancel a request:
use the remove method exposed on the returned object of useQuery
use the QueryClient method: cancelQueries
(see: useQuery reference here)
see: QueryClient reference here and specifically cancelQueries
Using remove with useEffect
(I've only kept the relevant bits of your code)
const Component2: React.FunctionComponent <RouteComponentProps<any>> = (props) => {
const fetchChart = async() => {
const res = await fetch(`/detail/${id}`);
return res.json();
};
const {
data,
status,
/** access the remove method **/
remove
} = useQuery('planeInfo', fetchPlane, {
staleTime: 5000,
});
useEffect(() => {
/** when this component unmounts, call it **/
return () => remove()
/** make sure to set an empty deps array **/
}, [])
/** the rest of your component **/
}
Calling remove like this will cancel any ongoing request, but as its name suggests, it also removes the query from the cache. Depending on whether you need to keep the data in cache or not, this may or may not be a viable strategy. If you need to keep the data, you can instead use the canceQueries method.
Using cancelQueries with useEffect
Much like before except here you need to export your queryClient instance from the routing component file (as you have it defined there) and then you're importing that instance of QueryClient into Component2 and calling cancelQueries on the cache key from useEffect:
import { queryClient } from "./routing-component"
const Component2: React.FunctionComponent <RouteComponentProps<any>> = (props) => {
const fetchChart = async() => {
const res = await fetch(`/detail/${id}`);
return res.json();
};
const {
data,
status,
} = useQuery(['planeInfo', id], fetchPlane, {
staleTime: 5000,
});
useEffect(() => {
/** when this component unmounts, call it **/
return () => queryClient.cancelQueries(['planeInfo', id], {exact: true, fetching: true})
}, [])
/** the rest of your component **/
}
Here you see that I've implemented the query key as I suggested before, with the id as well. You can see why having a more precise reference to the cached object can be beneficial. I'm also using two query filters: exact and fetching. Setting exact to true will make sure React Query doesn't use pattern matching and cancel a broader set of queries. You can decide whether or not this is necessary for your implementation needs. Setting fetching to true will make sure React Query includes and cancels and queries that are currently fetching data.
Just note that by depending on useEffect, it is in some cases possible for it's parent component to unmount due to factors other than the user navigating away from the page (such as a modal). In such cases, you should move your useQuery up in the component tree into a component that will only unmount when a user navigates, and then pass the result of useQuery into the child component as props, to avoid premature cancellations.
Alternatively you could use Axios instead of fetch. With Axios you can cancel a request using a global cancel token, and combine executing that cancellation with React Router's useLocation (example here). You could of course also combine useLocation listening to route changes with QueryClient.cancelQueries. There are in fact, many possible approaches to your question.

How to execute a function when a Reacter Router is triggered

I'm using the package Reacter Router to create and manage the routes of my application.
I am using an OAuth authentication system, which returns the following URL to my application:
http://localhost/login-meli?code=1234567890
I need that each time this route with the query "code" is triggered to execute a certain function, which as an example, can be: console.log('It works!')
I tried the code below and it worked, but I didn't find in the documentation how can I specify a specific query. I also noticed that when I add other lines of code an error is returned.
<Route exact path="/login-meli" render={() => (
console.log('works!!!')
)}/>

You can use the useLocation hook from react-router-dom.
import { Route, useLocation } from "react-router-dom";
Then in your route:
const MyComponent = () => {
const location = useLocation();
const params = new URLSearchParams(location.search);
const code = params.get('code');
if (code === '123456789') {
return (<div>It Works!!!</div>);
} else {
return (<div>404 (you can redirect to an error page</div>);
}
}
Then, for your Router:
<Route exact path="/login-meli"><MyComponent /></Route>

React JS How to handle authentication

I am trying to join Backend (Express JS) and Frontend (React JS). Right now I am trying to understand how to handle session management.
When a user logins using a form made with React JS, the backend returns a HS-256 JWT token with the user information as a payload.
To avoid unlogged users from fetching data I read that the frontend has to send the bearer token as header and this works fine. But I am not able to find a way of how to avoid the users of using the application in first place, I mean, when every page loads.
Right now my Login code looks like this:
import React, { useEffect, useState } from 'react';
import { useCookies } from 'react-cookie';
export default () => {
const [cookies, setCookie] = useCookies(['auth']);
const [redirect, setRedirect] = useState(false);
const handleSubmit = async e => {
e.preventDefault();
const response = await fetch('server/auth/login', options);
const {token} = await response.json();
setCookie('token', token, { path: '/' });
};
useEffect(() => {
if (cookies.auth) {
setRedirect(true);
}
}, [cookies]);
if (redirect) {
return <Redirect to="/admin" />;
}
return <form onSubmit={handleSubmit}>...</form>
};
I don't know how to use this information in each component to proper set user restrictions. What should I do in order to achieve this?

What you'd want to do is initially check if the by user is authenticated by checking for a the token in local storage / cookie. If so, allow the user to proceed to the route they have visited, if not redirect them back to the login screen ( or error screen). Typically, React users use routing libraries such as react-router-dom. On the documentation of the site, they go over how to go about authentication. Happy coding https://reacttraining.com/react-router/web/example/auth-workflow

Just store the token in local storage and in your router use protected wrappers to routes. If the token doesn't exist or is expired, return redirect to Login.js.
The best way to handle it would be to use an identity and Auth provider like Auth0 and read their documentation for react applications. it's really easy to set up and achieve what you are trying to do out of the box.
Here's an example from my application:
function PrivateRoute({ component: Component, ...rest }) {
return (
<AuthContext.Consumer>
{auth => (
<Route
{...rest}
render={props => {
if (!auth.isAuthenticated()) return auth.login();
return <Component auth={auth} {...props} />;
}}
/>
)}
</AuthContext.Consumer>
);
}

You have to save the token in local storage, so that whenever the user refreshes the page, the token would still exists.
const handleSubmit = async e => {
e.preventDefault();
const response = await fetch('server/auth/login', options);
const {token} = await response.json();
setCookie('token', token, { path: '/' });
localStorage.setItem('token', token);
};
// Check if token exists
const token = localStorage.getItem('token');
if (token && token !== '') {
return <Redirect to="/admin" />;
}
return <form onSubmit={handleSubmit}>...</form>
Note that you still have to validate that token on your server-side script before actually allowing the user to access your admin page.

How to set state before render with react(redux)

I want to make a component able to redirect when not loggedIn.
Components were made with react, checking auth function works well with redux.
//App.js
class App extends Component {
checkUserInfo () => {
const loggedInfo = storage.get('loggedInfo');
if(!loggedInfo) return;
const { UserActions } = this.props;
UserActions.setLoggedInfo(loggedInfo)
}
constructor(props) {
super(props);
this.checkUserInfo();
}
render() {
console.log(this.props.logged)
return(...)
}
}
export default connect((state) => ({logged: state.user.get('logged')}, (dispatch)=> ...)
and UserActions.setLoggedInfo action is look like this.
...
export default handleActions({
[SET_LOGGED_INFO]: (state, action) => {
return state.set('logged', true)
}
})
...
So, I want situation that component is redirected when auth is not logged in. I made a rendering component <Route/> with condition which is that if state.logged==false, <Redirect to='login/>.
But in very front point, logged is false before executing checkUserInfo function. so when I'm loggedIn, Redirect to /login, and when I'm not loggedIn, Redirect to /login too.
//PrivateRoute.js
...
render() {
const { logged } = this.props;
console.log(logged);
return(
<Route path="/myPage" render={props =>
logged ? <Component/> : <Redirect to={{pathname: '/login'}}/>
}/>
)
}
...
this is screenshot what is logged value in console.
I want to skip very front state before set state by myFunction(checkUserInfo), how can I do.
plz help me.
and sorry to not good english syntax.

You need to check your global state before rendering the private component.
render prop provided by Route is a good place for that
<Route path='/secretarea' render={() =>{
return props.isLoggedIn ? <SecretComp /> : <Login />
}}/>

Set PrivateRoute like this
This could help to check auth in simple way.