README.md

use-navigate

Usage

npx react-router-v6-codemods use-navigate path/of/files/ or/some**/*glob.js

# or

yarn global add react-router-v6-codemods
react-router-v6-codemods use-navigate path/of/files/ or/some**/*glob.js

Local Usage

node ./bin/cli.js use-navigate path/of/files/ or/some**/*glob.js

Input / Output

• advanced
• basic

---

advanced

Input (advanced.input.js):

function Project(props) {
  const history = props.history;

  return (
    <div>
      <MenuList>
        <MenuItem
          onClick={() => {
            history.push('/elsewhere');

            history.replace('/elsewhere');

            history.go(-1);
          }}
        />
      </MenuList>
    </div>
  );
}

Output (advanced.output.js):

import { useNavigate } from 'react-router-dom-v5-compat';
function Project(props) {
  const navigate = useNavigate();

  return (
    <div>
      <MenuList>
        <MenuItem
          onClick={() => {
            navigate('/elsewhere');

            navigate('/elsewhere', {
              replace: true
            });

            navigate(-1);
          }}
        />
      </MenuList>
    </div>
  );
}

---

basic

Input (basic.input.js):

function App() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

Output (basic.output.js):

import { useNavigate } from 'react-router-dom-v5-compat';
function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}