单击按钮时反应路由器获得正确的显示页面

Question

I have a question regrading to react. I have a IconButton (Material UI) I want to click this button and it will redirect to the specific help page.

For example:

1. local:3000/education. When I clicked button it will redirect something like local:3000/education/support page.
2. local:3000/data. It redirect to something like data/support page. ...etc more pages

I am stuck, I am not sure how to implement the button onClick function to redirect to the right support page. I am thinking using react-router, I have did some research we can use 'params' and 'history' parameters from the props? Thank you

Please give me some good advice and right direction thank you.

Answer 1

import { useLocation, useHistory } from "react-router-dom";

export default function App() {
  const history = useHistory();
  const { pathname } = useLocation();

  return (
    <div className="App">
      <button onClick={() => history.push(`${pathname}/support`)}>
        support page
      </button>
    </div>
  );
}

Answer 2

localhost:3000/education. If you use history.push("/support"), It redirects to localhost:3000/support. But If you use history.push("support"), It redirects to localhost:3000/education/support

https://reactrouter.com/web/api/Hooks