-
-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Switch "location" prop in v6 #7117
Comments
this would also affect the animated transition example, i would think: https://reacttraining.com/react-router/web/example/animated-transitions |
Yeah, I'm having trouble getting animations to work per the animated-transitions example. I think it's because the |
@Motoxpro here is answers to your questions.
Here is the sample code. https://github.com/smkamranqadri/react-router-v6-test |
Here is the live demo, click on the about link |
Thanks @smkamranqadri For question 2, when you say
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? |
I'll look into that example later today. |
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 |
@ajsmth I tried to find the episode you mentioned but couldn't find it. Do you have a link to the episode? |
sorry i think it was actually React podcast! Episode 85 |
@ajsmth Perfect! I found it: https://reactpodcast.simplecast.fm/85 |
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 using 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>;
}; |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. |
Any solutions or alternatives for this? I also can't get animations to work. |
I guess #7298 will fix the problem with animated route transitions. |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. |
Same issues here, I was trying to add a page transition for my webapp, seems that the old example like this doesn't works for react-router v6. What's the solution in v6? |
This comment has been minimized.
This comment has been minimized.
In the meantime you can try the "fork" (kind of I couldn't run scripts in the original repo so I've created custom boilerplate) of react-router v6 (now I can continue on project where I've already started to use v6). Demo - modal gallery: https://utilize-react-router.vercel.app/ (original: https://reactrouter.com/web/example/modal-gallery) Packages:
It's a temporary workaround until Ryan and Michael have more time on public development of this package. (Then I deprecate these libs.) |
Any updates on when this will be resolved? |
Fixed in #7937 |
The main use case I can see for a |
I think what a lot of folks are describing here is a "stack" navigation that's popular in the React Native world. It's what #7943 is describing as well. Note that this is distinct from just nesting routes. We can always do something like Maybe there's some sort of specific solution for that kind of use case? |
* useRoutes: add support for location override - Resolves #7117
Added |
Thank you! |
good usage example RRv6+React-spring https://react-spring.io/hooks/use-transition#transitioning-between-routes |
We are going to have an animation API in v6 that we will be recommending over |
Will this support different transition effects for different levels of routing? In my case, I use a fade transition for top level routes and then a slide transition for drill-down/detail panel routes. I suspect that's a common pattern. I'm able to do this in v5 by handling the switching/matching. In v6, I thought I'd be able to insert a different around the drill-down child routes, but I bump into the "only elements are allowed" invariant. If someone has an example of how to accomplish this, please share. Thank you! |
I know it's not recommended, but it's needed for an app I'm building and we're already to far down the V6 rabbit hole to turn back now. Here's a code snippet of something working for me! Sandbox: https://codesandbox.io/s/react-router-v6-animated-routes-9zm9p Note: Be careful of putting any context inside of the Wrapper component. Since you are using the import { CSSProperties, FC } from "react";
import { Outlet, Route, Routes, useLocation } from "react-router-dom";
import { AnimatePresence, motion } from "framer-motion";
import { BrowserRouter, Link } from "react-router-dom";
const styles: CSSProperties = {
minHeight: "100vh",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
fontSize: "40px"
};
const Route1 = () => {
return (
<div style={{ ...styles, backgroundColor: "burlywood" }}>
<p>🥝</p>
<Link to="/route-2">Route 2</Link>
<Link to="/route-3">Route 3</Link>
</div>
);
};
const Route2 = () => {
return (
<div style={{ ...styles, backgroundColor: "cornflowerblue" }}>
<p>🍎</p>
<Link to="/route-2">Route 2</Link>
<Link to="/route-3">Route 3</Link>
</div>
);
};
const Route3 = () => {
return (
<div style={{ ...styles, backgroundColor: "papayawhip" }}>
<p>🍑</p>
<Link to="/">Route 1</Link>
<Link to="/route-2">Route 2</Link>
</div>
);
};
export const Wrapper: FC = () => {
return (
<motion.div
initial="initial"
animate="in"
exit="out"
variants={{
initial: {
opacity: 0
},
in: {
opacity: 1
},
out: {
opacity: 0
}
}}
transition={{
type: "spring",
damping: 10,
stiffness: 50
}}
>
<Outlet />
</motion.div>
);
};
export const AnimatedRoutes: FC = () => {
const location = useLocation();
return (
<AnimatePresence exitBeforeEnter>
<Routes location={location} key={location.pathname}>
<Route element={<Wrapper />}>
<Route element={<Route1 />} path="/" />
<Route element={<Route2 />} path="/route-2" />
<Route element={<Route3 />} path="/route-3" />
</Route>
</Routes>
</AnimatePresence>
);
};
export default function App() {
return (
<BrowserRouter>
<AnimatedRoutes />
</BrowserRouter>
);
} |
This causes components inside the Wrapper to be rendered repeatedly |
Please see an example on how to do animations in RRv6 & react-transition 4 here: https://codesandbox.io/s/lqc45 |
@mleister97 I saw your implementation. I was curious, is it possible to apply animations only to certain pages(to imitate react-navigation's stack navigator animation) not all? |
@khayrullaev I am not sure about a performant solution. Maybe you can watch for the location hook to change and adapt the |
Is there an update regarding this? @mjackson |
Why would a Router intrinsically support Animations? Isnt that breaking the single-responsibility principle? |
@mleister97 but what about redirect? <Routes location={location}>
<Route path="/first" element={<Page1 />} exact />
<Route path="/second" element={<Page2 />} />
<Route path="/third" element={<Page3 />} />
<Route path="/swag" element={<Navigate to="/first" replace />} />
</Routes> then it will cause multiple re-renders on redirect and blow-up the page |
As pointed in #8470, the implementation seems incomplete in regard to https://reacttraining.com/react-router/web/example/modal-gallery Although the Here's a reproduction: https://codesandbox.io/s/vigilant-alex-j58zg6?file=/src/App.js |
Any updates on getting animated navigations into v6? Thank you! |
@lovelidevs It works now! See https://github.com/nanxiaobei/react-slide-routes @zhouzi updating |
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:
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>
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
The text was updated successfully, but these errors were encountered: