I have a project on React, and for layout, I am using an old version. I want to use the new version of react-router-dom but I have some problems. These are my codes. App.js <Route element={<AuthLayout />}> <Route element={<LoginPage />}…
I have the start page in the Root component and I added the Header and Footer components wrapped in a div, but I don't know how to include them with the rest of the routes in the best way. Am…
My Home, Group, Learn, Message, Profile component is not working? There are multiple Routes but in nested routes I want to show the navbar and the body component which is Home, Group, Learn etc. Pic <BrowserRouter> <Routes> <Route index element={<Login…
<NavLink className={({ isActive }) => (isActive ? "isActive" : "isNotActive")} to={"artist/" + currentMotive.artist.slug.current} key={currentMotive.artist.slug.current}> {currentMotive.artist.name} </NavLink> How can I change the attribute to in the same way as className? Like: to={({ isActive }) => isActive ? "/motive/" + currentMotive.slug.current :…
I want to redirect page without render. Index page useEffect(() => { if (!cookie) { router.push('/login') } }, []); When I open index page it retain for few second then redirect to login page. Can avoid to render it?
I have an web application with ReactTS. I use react-router library for navigation and I need to navigate user to registration page on Registration button click programmatically. I found several ways to do that programmatically in react-router: with useNavigate hook…
I created my react app with create-react-app and I built it with the yarn build. Then I am using Express js server to render the static react app. My react app is using react router. When I try navigate to…
I want to add Route to my Shop component and show CollectionOverview component but the CollectionOverview component is not showing and there are also no errors in console. import React from 'react'; import { Route, Routes, useLocation } from 'react-router-dom';…
I have a Switch with a series of Route elements in my main container: AppContainer.js <Switch> <Route exact path={`/app/:slug/`}> <Redirect to={`/app/${slug}/home`} /> </Route> <ProtectedRoute path='/app/:slug/userAdmin/' component={UserAdminContainer} message={'This page is read-only'} /> [snip] <Route path='/app/:slug/protectedRoute/' render={(props) => ( <ReadOnlyError message={props.message} />…
I traveled through topics similar situation to mine, but I still not found the solution to my case. When I implemented checking token function on app.js to generate code for Unauthenticated User redirect to Signin page and Authenticated User jump…