React-router: Switch "location" prop in v6

[Motoxpro]

Hey guys!

Amazing work on v6. Just spent the last few hours toying around and converting a few things. Made so many things so much easier!

Two things as I was messing around and looking through the code:

1. The component's "to" prop seems different? Instead passing an object like this
   props={pathname: '/home', state: {cool: true}} <Link to={props}>Link</Link>
   I have to do this:
   props={to: '/home', state: {cool: true}} <Link {...props}>Link</Link>

2. It seems like the "location" prop from the Switch component is gone with Routes. If so, how would I implement a pattern like this?
   https://reacttraining.com/react-router/web/example/modal-gallery

[ajsmth]

this would also affect the animated transition example, i would think: https://reacttraining.com/react-router/web/example/animated-transitions

[tconroy]

Yeah, I'm having trouble getting animations to work per the animated-transitions example. I think it's because the location prop no longer exists on Routes. Curious if anyone has found a solution for this yet.

[smkamranqadri]

@Motoxpro here is answers to your questions.

1. You have to pass state same as to like
2. You have to use hook for location which is useLocation.

Here is the sample code.

https://github.com/smkamranqadri/react-router-v6-test

[smkamranqadri]

Here is the live demo, click on the about link

https://react-router-v6-test.netlify.app

[Motoxpro]

Thanks @smkamranqadri

For question 2, when you say

You have to use hook for location which is useLocation.

The example, https://reacttraining.com/react-router/web/example/modal-gallery , already uses useLocation. The problem seems to be that you need to show two routes at the same time if the "location" prop is a certain location but we no longer have a "location" prop

Could you maybe elaborate a bit more on how to achieve this?

[smkamranqadri]

I'll look into that example later today.

[ajsmth]

If you listen to the Full Stack Radio episode with @mjackson he suggests that there might be more advanced routing options coming. I can't quite recall exactly what he said but it I think it made sense for this use case

[MeiKatz]

@ajsmth I tried to find the episode you mentioned but couldn't find it. Do you have a link to the episode?

[ajsmth]

sorry i think it was actually React podcast! Episode 85

[MeiKatz]

@ajsmth Perfect! I found it: https://reactpodcast.simplecast.fm/85

[strass]

I am also wondering about what to do here. I have the same need for the Switch.location prop but different use case (not animations but PIP browsing based on location state similar to the modal gallery example).

I got a proof of concept working usingmatchRoutes and a 'virtual path', although I'm sure there are many possible improvements here's what I worked out last Friday:

const Sidecar: FunctionComponent = () => {
  const location = useLocation();
  const virtualPath = location?.state?.sidecar ?? "/";
  const R = matchRoutes(
    [
      { path: "/2", element: <Test2 /> },
      { path: "/*", element: <Test1 /> },
    ],
    {
      pathname: virtualPath,
    }
  );
  const ElOne = R && R[0] ? R[0] : null;
  const Element = ElOne?.route.element;

  return <aside>{Element}</aside>;
};

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
You can add the fresh label to prevent me from taking any action.

[ashkan-pm]

Any solutions or alternatives for this? I also can't get animations to work.

[ashkan-pm]

I guess #7298 will fix the problem with animated route transitions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
You can add the fresh label to prevent me from taking any action.