react-router
How to programmatically navigate using React Router?
UPDATE: 2022: React Router v6.6.1 with useNavigate The useHistory() hook is now deprecated. If you are using React Router 6, the proper way to navigate programmatically is as follows: import { useNavigate } from “react-router-dom”; function HomeButton() { const navigate = useNavigate(); function handleClick() { navigate(“/home”); } return ( <button type=”button” onClick={handleClick}> Go home </button> … Read more
Advantages of dynamic vs static routing in React
Dynamic Routing From the react router docs: When we say dynamic routing, we mean routing that takes place as your app is rendering, not in a configuration or convention outside of a running app. Think of routes as components The earlier versions of react-router (pre v4) used to have static routes. This led to a … Read more
In React Router v6, how to check form is dirty before leaving page/route
Update: Prompt, usePrompt and useBlocker have been removed from react-router-dom. This answer will not currently work, though this might change. The github issue, opened Oct 2021, is here The answer… This answer uses router v6. You can use usePrompt. usePrompt will show the confirm modal/popup when you go to another route i.e. on mount. A … Read more
“Invalid Host Header” in When running React App
At your webpack config, you could add disableHostCheck: true at devServer configuration. For example, devServer: { disableHostCheck: true }
How to mock react-router context
Thanks @Elon Szopos for your answer but I manage to write something much more simple (following https://github.com/airbnb/enzyme/pull/62): import NavLink from ‘../index’; import expect from ‘expect’; import { shallow } from ‘enzyme’; import React from ‘react’; describe(‘<NavLink />’, () => { it(‘should add active class’, () => { const context = { router: { isActive: (a, … Read more
How to redirect to a new page from a function in React?
If you use the react-router-dom package you can wrap your component with a router and then you have the ability to redirect the user programmatically, like so this.props.history.push(‘/login’). Eg: import {withRouter} from ‘react-router-dom’; class Component extends React.component { constructor(props){ } componentDidMount(){ this.props.history.push(‘/login’); } } export default withRouter(Component); See: https://www.npmjs.com/package/react-router-dom.
difference between React router.push and router.replace?
The router history works like a stack of routes. When you use the router.replace, you’re overwritting the top of the the stack. When using the router.push, it adds a new route to the top of the stack. The router history allows you to go back to the last page. For example, when the user navigates … Read more
How to emulate window.location with react-router and ES6 classes
After wasting time with react router, I finally switch to basic javascript. Create a component for your redirect: Route path=”*” component={NotFound} In the component use window.location to redirect: componentDidMount() { if (typeof window !== ‘undefined’) { window.location.href = “http://foo.com/error.php”; } }