Handling dynamic routes

[alperunal]

Using React-snap with React Router (5.1.5)

<Switch> <Route path="page/:id"> <Page /> </Route> <Route path="page"> <Page /> </Route> </Switch>

After the build, it creates page.html so I page without params works (http://url/page). However, if I try something like this http://url/page/3, I get 404 page.

How can I make the dynamic routes work?

Edit: Normally using HashRouter instead of BrowserRouter solves the problem without SSR.

[urosran]

I have a similar issue in that react-snap will only crawl the homepage at route "/" and none of the links that are leading from it to other pages such as /:pageid

[BrightonNgema]

@urosran I resolved it by creating hidden <Link/> tags with all the dynamic links as static. Unfortunately its gonna be quite a process if you have a lot of links.

[urosran]

@BrightonNgema thanks for the answer! As I have an album component and each image is a route to a store (in an e-mall) the following worked: <Link to={'/' + yourUrl} style={{display: 'none'}}>linkToStore</Link>

[peterdu98]

Thanks all, I resolved it by adding hidden <Link to={path} />. For those who are building a static Github Pages, one drawback of this is that you will need to rebuild every time when you have a new post.

[huurray]

@urosran @peterdu98 i can't understand it. could you show me any example?

[peterdu98]

@huurray In my case, I add <Link to={path} /> in the render() of the App class:

render() {
    <React.Fragment>
           // Here, if you have more than 3 links, I would suggest using `state`
           // and `componentDidMount` to return them dynamically.
          <Link to="/path_1" />
          <Link to="/path_2" />
          
           // Other blocks of code below
    </React.Fragment>
}

Note: Since <Link /> is used, it won't show in your UI but will render <a href="/path"></a> in your browser. You can double-check this via the developer tool in your browser.

[ricky11]

How would this work if we dont know the dynamic link path?

for example /download/slug*
where slug is a 5 digit random sequence of letters

I'm not sure how react-snap will create a index.html in a /download/??? folder ?