Using _redirects for SPA react components

Support
1

Hi everyone! Sorry for the newbie question. I’m new to react and am trying to figure out react-router-dom deployment with netlify. everything works totally fine with my local, but once i deploy to netlify it doesn’t work :frowning:

Everything deploys fine, but when I click my links (for example to go to netlify.app/MY_OTHER_COMPONENT) it appends the URL as expected although the URL throws a 404. For example, this URL works fine on my local but not in prod

NOTE: I do not have any _redirects file yet - might this be the issue?

Thoughts? Thank you!!

2

Hi @mdk0027

As per History pushstate and single-page apps SPAs require a rewrite, for the router to do that routing

/*    /index.html    200

Generally speaking though, when clicking a route link on a page they work, but when either refreshing the page, or navigating directly they don’t, so it is strange the links you have don’t work.

Ok, so looking at your page, each See more button is a inside a form, and makes a GET request to the new route (which explains the ? on the end) instead of links. As someone who hasn’t worked with React a lot, I can’t say why this is the case, but I believe removing these buttons from forms, and making them links will solve most of the issues you are having.

Ah, I see <Card /> is a component you have written.

function Card(props) {
  return (
    <div className='card'>
      <div className='card__body'>
        <img src={props.img} className='card__image'/>
        <h2 className='card__title'>{props.title}</h2>
        <p className='card__description'>{props.description}</p>
      </div>
      <form className='card__form' method="get" action={props.link}>
        <button className='card__btn'>See more</button>
      </form>
    </div>
  )
}

Try replacing the <form>...</form> element with a link e.g

<a className='card__btn' href={props.link}>See more</a>
3

Ah thank you! You’re totally right, the GET request was not the right way to approach this. I fixed the link accordingly.

Strangely, though, it doesn’t appear to have fixed the 404 on url click problem. I’ll try to add that pushstate rule to the _redirects file

Any other ideas would be much appreciated- thank you so much for your help!!

4

Oh it looks like adding that did it! Thanks again for the help!

1 Like
5

Interested to look at some of your work when you the site finished.