menu
up-caret
down-caret

React Static

A fast, lightweight, and powerful framework for building static-progressive React applications and websites.

# General

Anything & Everything

Trending conversations
Why does static.config.js runs twice? (v5)
@danr4 · 59m
Using the <Head/> component exported by react-static with TypeScript
@ywissner · 4h
Noob question about embedding script tags from other sites
@kirkleton · 41d
Is it possible to use react-native-web with react-static?
@dancoman · 5d
Migrating issue: `sharedHashesByProp` is undefined (build fails if not changing…
@tn1ck · 41d

Programmatic call of <Link to="path">

Cliff Asaurus (@cliffasaurus) · October 18, 2018 at 11:24am

Programmatic call of <Link to="path">

October 18, 2018 at 11:24am

I want to

  1. click a link
  2. preventDefault()
  3. wait for a 200ms animation to finish
  4. call the to= programatically

I've tried window.location = "path" and history.push(path) but I understand that <Link> has special properties and I can't seem to find this in the docs


October 18, 2018 at 9:48pm

I learned this the hard way. Here is what I found out :

- history.push(path) actually works. You can navigate with it. BUT :

- When you use the classic <Link> tag from react-static, you don't actually just have a react-router <Link>, it's a enhanced version of it with prefetch option. This is well explained in the doc and can be seen in the code.

- https://react-static.js.org/docs/components#link

- https://github.com/nozzle/react-static/blob/master/src/client/components/Link.js

- For whatever reason, when you don't use Link at all, you have to use the <Prefetch path={path}> component before programmatically routing to path, otherwise the template and the data of your target page won't load, even if you are successfully routed to your new location.

- Therefore, what's not true in the doc when it comes to history.push(path) is this sentence :

- "This ensures that if the user then navigates to that route , they will not have to wait for the required data to load"

- In fact, when programmatically routing to a given path, the data is never loaded, not even while waiting on the target page.

- https://react-static.js.org/docs/components#prefetch

like-fill
1
  • reply
  • like

October 19, 2018 at 6:00am

In fact, when programmatically routing to a given path, the data is never loaded, not even while waiting on the target page.

Does this mean then that this is not possible? :(

  • reply
  • like

It is, you just have to manually <Prefetch> that data. See the link to the doc above.

  • reply
  • like

I can't seem to get it to work. Here's what I did:

{
navData.main.map((item, i) => (
<Prefetch path={item.route} key={i}>
<div onClick={
(e) => this.handleClickLink(e, item.route)
}>
{item.text}
</div>
</Prefetch>
))
}

and then my handler was simply:

handleClickLink(e, url) {
e.preventDefault()
history.push(url)
}

and the URL bar does show that the route has changed but the page is as if it didn't move :'(

  • reply
  • like

where item.route is the following:

/services

/about

/contact

these are valid paths. I'm not sure where I'm doing it wrong. I'll double check my syntaxes

  • reply
  • like

Try to use the history object from the withRouter HOC.

But actually, you could use the classic <Link> here.

  • reply
  • like

Hi again. I don't think I'm creating the history instance correctly. :(

is it correct that:

1. import createHistory from 'history/createBrowserHistory'

2. const history = createHistory() at the topmost, before any class declarations

3. then inside the render of a component

<Prefetch path='/blog'>
<Link to="/blog" onClick={
(e) => {
e.preventDefault()
history.push('/blog')
}
}>
Try Prefetch Blog
</Link>
<Prefetch>

I created a very small reproduction at https://rs-netlify-playground.netlify.com/about

https://github.com/cliffasaurus/rs-netlify-playground/blob/master/src/containers/About.js

<Link> does not have a history= prop. <Router> does. Is this where I'm going wrong? the injection of history?

I can't seem to understand how to use <Link> natively with <Prefetch>. :'(

  • reply
  • like

- Wrap your entire app in a <Router> component (from 'react-static'), then use withRouter high order component from 'react-static' too on your component, which will give you a history prop.

  • reply
  • like

instead of wrapping the whole app, I just made a reusable class. something like:

class RouteLinkWrapper extends React.Component {
render() {
const { toPath, text } = this.props
return (
<Route render={({ history }) => (
<div onClick={() => { history.push(toPath) }}>
{text}
</div>
)} />
)
}
}

Thanks a lot for helping me with this! I owe u :D

  • reply
  • like

I think you make confusions between Link, Router, Route, etc.

<Router> MUST wrap up your entire app at its root.

<Link> is used to make an item to navigate to a specific page when you click on it

<Route> just renders it's content when the url matches the route's path.

Please read the doc.

- Don't use <Route>, use <Routes> from 'react-static-routes' (follow the examples in the doc)

- Use <Link> instead of programmatically navigating (just `<Link path='/your-path'>`)

  • reply
  • like

oh okay, I see. I did what you said and used withRouterHOC instead :D

  • reply
  • like

Glad I helped. But really, just using <Link> is way simpler.

  • reply
  • like

Thanks for staying with me!

Yeah that would be a lot simpler, but clicking Link is an instant redirect. I want a 200ms delay, then programmatically redirect route.

  • reply
  • like

November 28, 2018 at 8:21pm

But you can have an on click on Link and prevent the default there and then do what ever you want.

  • reply
  • like