Buttons not working when using reactjs and nodejs

Question

I wrote my first app using nodejs,reactjs and spring using this tutorial and all went fine except for the buttons that are not working as expected because when I click on them, the link is updated in the browser address but the page is not loaded until I press F5 to reload.

Is hard to explain without an image so I attached a print screen with some text.

So I can add customers, delete and edit... but after every click on a button, I must press F5 to actually load the destination page. I tried this in Chrome, Edge and Opera and in all browsers the behaviour is the same.

This seems to be very basic but I don't know what to search on google to fix it, I tried to search documentation about the button tag but in everything I read I can't even find the attributes listed in the tutorial.

The button syntax is "<Button size="sm" color="primary" tag={Link} to={"/clients/" + client.id}>Edit" and attributes like "tab" and "to" don't seem to be documented in the reactjs documentation.

Answer 1

I think you should use Link in react router and also check you api if their syntax is correct

Answer 2

Why not use the useHistory hook with Button onClick. Seems like there is no to prop in reactstrap documentation. You need to convert your container component using the Button in to functional component though.

import { useHistory } from "react-router-dom";
import { Button } from 'reactstrap';

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push(`/clients/${client.id}`);
  }

  return (
    <Button size="sm" color="primary" onClick={handleClick}>Edit</Button>
  );
}

Answer 3

After more searching I found the answer here:

Link tag inside BrowserRouter changes only the URL, but doesn't render the component

Thank you.