I'm trying to expand a bit on the nested routes example over at react training in the quick start guide.
Code sandbox: https://codesandbox.io/s/routing-test-ubpjp
In the code sandbox browser, if you navigate to /some - this works, then click SomeOne - this also works. However, clicking "SomeTwo" which should redirect to "Some" loads blank, why?
Also, those links fail to work right off the bat? There might be some strange stuff in the sandbox as I've been hitting it with random stuff to try and get it working.
I just want to structure the routes such that I don't have to have all of these routes in one file.
I've done a lot of searching and have tried a lot of different kinds of implementations, but all of them end up having issues / problems, either with adding a catch-all route, or redirects.
Removing the props from the Switch worked, but this breaks the AnimatePresence from framer-motion.
Following the example of framer-motion at: https://codesandbox.io/s/framer-motion-x-react-router-n7qhp?file=/src/index.js
The redirect still fails, even with the withRouter hook on the Navigation and redirect component.
You need not pass any props to Switch component. Also make sure that you are rendeing Navigation component as a Route or use withRouter HOC, so that it received Router props.
<Switch>
{children}
</Switch>
Related
I have a react app, and I'm using react-router, I have a few nested routers, that seem to work fine.
However, when I refresh the page, even though the URL of my browser is something like /admin/users/blah/ nothing is loaded by react-router, it's as if none of the <Route> components get triggered when the page is refreshed by the user. I see my site's navigation menu, but the content that is supposed to be rendered with a router is just blank, again, as if no <Route> matched the current URL.
Are there any special considerations or boilerplate I need to add in order to have the expected behavior?
I would expect react-router to match the <Route> components again, and render according to my browser's URL, but it doesn't do that.
I figured out my issue, I had multiple nested <Router> elements. You only actually need one. You can nest as many <Switch> elements as you want, though.
I've been trying to find a straight answer to this and even after searching StackOverflow, I can't find a correct answer for the current version of React.
In my case, I have the following scenario-- the user sets up their data, they post it to the server and within my Save() method, if the save operation is successful, I want to redirect them to the root home page.
Much of the documentation I've found mentions using this.props.history.push(...) to push the new route. However, something has changed with React 4.0.0+ and now history is undefined on the props page.
I am not necessarily interested in pushing the new route to the history object if that is a deprecated way of routing to another page. However, all of the more current examples I've found talk about setting up routes and links within the JSX. That's fine, but I've yet to find a way to programmatically redirect the page un certain code conditions.
Apologies if there is an answer out this already, but I haven't found a straight answer.
The route props are only given to the components that are used for the component or render props of the Route components.
If you want to use the route props in any other component in your app, you need to pass the props manually or use the withRouter HOC.
import { withRouter } from "react-router-dom";
// ...
export default withRouter(MyComponent);
You have to connect this component with router. To connect you have to use withRouter.
export default withStyles(commonModalStyle)(withRouter(connect(mapStateToProps, mapDispatchToProps)(NewOrUpdateModal)));
Please refer this
I'm currently having some trouble using React-router v4, with redirections when using URL parameters.
Here's the route I'm using:
<Route path="/blog/page/:number" component={Blog} />
I'm using the UI framework Semantic-ui-react and its component Pagination ( https://react.semantic-ui.com/addons/pagination#pagination-example-shorthand) and I can't render its elements as Links or NavLinks from react-router-dom.
Instead, I have to use the event function onPageChange(activePage), which allow me to redirect to the page clicked.
I figured a way to do so, by rendering a <Redirect to={location} push /> component from react-router-dom, and it works quite well except that it requires a component update management as it won't remount the component Blog...
My issue is, that I can't use browser's (chrome) button to navigate forward and backward, it just modifies the URL and doesn't remount the component.
As I have no hook to control the browser "previous" and "next" button, I'm wondering how I could fix it.
Thank you.
react-router has a built in history management and you can navigate using the push(new_location) function.
I found a way.
Actually when you push the previous and next button of your browser, if you are using the same component, the life cycle's methods componentWillUpdate () and componentDidUpdate() will be triggered.
I parse the URL with this.props.history.location, and now, I can make sure that the component will rerender with the right datas when thoses buttons are pushed.
I am using React Router with React Transition Group to animate between routes. I have a problem when I use a <Redirect /> component. The App works, but I get multiple warnings from React Router that reads:
Warning: You tried to redirect to the same route you're currently on: "/"
You can see it happen in this Code Sandbox. Make sure to open the sandbox console and then enter a bad path (like codesandbox.io/abc).
I tried following the example they give in their docs (https://reacttraining.com/react-router/web/example/animated-transitions), but that does not include a Redirect. Is there a better way to use Redirect and Transitions to avoid the warnings?
This issue occurs when a <Redirect> mounts within the animation components.
Instead of wrapping your animation components around <Switch>, wrap the <Route>'s child component. (You may need to use the <Route>'s render prop vs its component prop.)
This approach eliminates the need to pass the location prop to <Switch> -- instead each <CSSTransition/> references location.
See example: https://codesandbox.io/s/nn5r595joj
In older versions I could use setRouteLeaveHook within my component.
For example (SO): Detecting user leaving page
With react router v4 the logic has changed away from injecting the router itself into the components and I only found the following function on router v4:
BrowserRouter. getUserConfirmation
I am a little bit confused, why I should link the confirm behavior with the Router itself and not with a specific component!?
How can I place a confirm window, when leaving my component (linked to my current route), while being in a certain state? This seems to be not supported by the function above.
I think the Prompt component is what you're looking for. Just render it in the component you want to confirm navigation form, i.e. the same component you render in your <Route>.
react-router-navigation-prompt also does what you want: it is a more powerful <Prompt />.