I'm trying to create something like here on stackoverflow:
When I enter this URL:
https://stackoverflow.com/questions/70615440
it will update the url to:
https://stackoverflow.com/questions/70615440/refactor-switch-statement-to-reduce-code-complexity
The url is possible to visit by id. It will add / update the slug to the url. I can also use the a random slug https://stackoverflow.com/questions/70615440/xxx and it will update it to the correct one :https://stackoverflow.com/questions/70615440/refactor-switch-statement-to-reduce-code-complexity
xenForo does something similar:
https://xenforo.com/community/threads/200874/
https://xenforo.com/community/threads/xenforo-2-2-8-patch-1-and-add-on-updates-released.200874/
How can I achieve something like this in a React app? How is that behavior called?
It's called routing. You can install react-router-dom and use useHistory and useLocation hooks. The usage is very simple. From documentation about useLocation:
The useLocation hook returns the location object that represents the current URL.
You can save the current URL in pathname and compare it with the id, if they match, you can use useHistory for navigation.
Example code:
const { pathname } = useLocation();
const history = useHistory();
const handleChange = () => history.push("/questions/70615440/refactor-switch-statement-to-reduce-code-complexity");
useEffect(() => {
if(pathname === "/questions/70615440"){handleChange()}
}, []);