0

I'm using React v.18 with React Router 6.3. When I am on a page and click a link to a front-end route, for example /groups/:groupId, I will be temporarily redirected to a default "*" route for a split second, before being directed to the desired route. Why is this happening and how can I fix this? Here is my App.js file:

function App() {
  const location = useLocation();
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchKeywords());
  }, []);

  return (
    <>
    <NavMenu />
    <Routes>
      <Route path="/" element={<LoggedOutHome />} />
      <Route path="/home" element={<HomeFeed />} />
      <Route path="/login" element={<LogInForm />} />
      <Route path="/signup" element={<SignUpForm />} />
      <Route path="/searchresults" element={<SearchResults />} />
      <Route path="/groups/:groupId" element={<GroupShow />} />
      <Route path="/groups/:groupId/edit" element={<GroupEditPage />} />
      <Route path="/groups/new" 
        element={
          <GroupFormProvider>
            <GroupFormIntro />
          </GroupFormProvider>
        }
      />
      <Route path="/groups/:groupId/events/new" element={<EventNewForm />} />
      <Route path="/events/:eventId/*" element={<EventHome />} />
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
    </>
  );
}

export default App;

I've tried adding a slash in front of "*", and removing the useEffect but the problem still persists.

Edit: To answer AKX and Drew's question, the flashing of the default route happens when a link coded as the below example is clicked:

 <Link to={`/groups/${group.id}`} >Group Link</Link>

There is no explicit route protection. I am using create-react-app. There is a backend in Rails, I don't think that is relevant.

Dobromir Kirov
  • 934
  • 4
  • 16
canjalal
  • 11
  • 2

1 Answers1

0

Not sure, but check if you have <React.StrictMode> in index.js, remove it and test it again. It seems that your page is being rendered twice.

If that's the case, here you can find more information, thank you! Why is my React component is rendering twice?

UPDATE MATCHING

It would be something like this:

<Route path="/groups" ...
   <Route path="/groups/:groupId" ...
   <Route path="/groups/:groupId/edit" ...
   <Route path="/groups/new"  ...

I read about it in this link: https://reactrouter.com/en/main/start/concepts in the section "Matching"

Redcomet
  • 11
  • 3
  • Tried taking React.StrictMode out and I'm still getting the Not Found page when I click Link elements that match the groups/:groupId path. – canjalal Oct 13 '22 at 15:09
  • I see. In the structure the path "/groups/:groupId" doesn't have a parent like "groups/". I think the route hits "groups/" first before going to "groups/:groupId" . I also don't know why, here its working normally, but if you want to try. Because of the identation I put the code in the answer above. – Redcomet Oct 14 '22 at 10:10