We can restrict certain routes if the person is not logged in. However, how can we restrict certain routes for rendering if the user is logged in? Below is my routing configuration: <BrowserRouter> <MenuBar /> <Routes> <Route path='/' element={<PrivateRoute><Dashboard /></PrivateRoute>}…
At my company, we're using Next.js for all front-end applications. My team is developing a client-side application, but we're using Next.js with disabled file-based routing. We have only one single index.tsx file inside the pages folder where the Router component…
This code supposedly works on my previous projects. I wonder why typescript returns this kind of error: Unsafe assignment of an anyvalue.eslint@typescript-eslint/no-unsafe-assignment Unsafe call of ananytyped value.eslint@typescript-eslint/no-unsafe-call (alias) createBrowserRouter(routes: RouteObject[], opts?: DOMRouterOpts | undefined): Router import createBrowserRouter react-router-dom version 6.14.1…
I'm using react-router-dom. After deployment the app is not working if we refresh the app, throwing an error Not found, but it works fine in the local environment. This happens for every route. <Routes> <Route path="/" exact element= {<Navigate to="/posts"…
The selected book depends on the URL parameter returned by the useParams hook. The selected book should also not be redefined from render to render unless the value returned by the useParams hook has changed. I would like to know…
I'm busy building a react app with firebase being used on the back-end. I've been building the app using react-router-dom and have recently created a protected route to prevent access to certain routes if you aren't logged in. I was…
I have a web application built on react js/next js where I have a couple of pages, including some globally used components, such as: Header and Footer. The problem is, I don't want to re-render the whole component and APIs…
I have a list of movie items where each item is wrapped in a react-router-dom Link component that navigates to a movie details page. Inside each movie item, I have a "Watch Now" button that opens the corresponding movie trailer…
In my React app, I am trying to navigate to a new page after I dispatch a redux action. The useNavigate hook definition: const navigate = useNavigate(); const handleEmailsent = async() => { await dispatch(sendEmail(email)); //if removed, navigate works. navigate("/login");…
Im not able to pass information using props through link in react route. I tried to pass the current contact got throught a component in the contactcard and passing the same prop to contactdetails but im not able to fetch…