I am using react-router-redux and would like to create a new custom NavLink or Link that preloads components for the hovered Link Route upon hover. I would be greatful for some help to point me into the right direction.
I have no idea how to accomplish mounting the component defined in the route without routing to it.
Basicly if I am at the root url of page and hover over a <Link to="/portfolio" /> I want the matched component defined in my routes to prefetch the data needed for this page so that when a user finally clicks the link the data would already be served.
I haven no issues creating a HOC to add eventlisteners to the Link's and then dispatch an action but I need help on how to mount the routes without actually routing to them.
react-loadable sounds like what you want.
https://www.npmjs.com/package/react-loadable
Related
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>
I have a problem with my react web app.
I have Multiple components : Home, Login, Header, Footer
I do a GET request in Header to retrieve categories from API and list it in the Header menu.
The problem is when i click on link (to go in Login or Home page), the request in Header is sent again because Header component is include in Home and in Login component.
Someone have a solution for that ?
Thanks in advance :)
check out using a router, such as React Router, to handle multiple pages without reloading layout stuff like your Header.
alternatively, you might want some caching to not hit the API every time your component renders
I have a spa that consists of a homepage, categories, about us and contact us.
They all take you to a different component except categories that should take me to a part of the homepage.
Is there a way how to do it with React-router or is there another way
to do it?
It is hard to give feedback without seeing your code.
But if I understood correctly, you want to navigate between the different components using React-Router.
You can import the Router, Switch and Route from React-Router and then in your toplevel-container component, you would create the different for each component, making the URL change based on each component, e.g. /about-us, /contact-us, etc.
If you want your categories to be part of your homepage, then you could create another inside Homepage component, where you want it displayed, if it's only rendered at a specific URL. If you want it displayed at all times, then make the link go to the /homepage URL, same as for the regular homepage component.
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.
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 />.