How to Navigate Outside of Components in React Router v6?

react router v6: Navigating Outside of Components

React Router v6 introduces changes in the way history objects are handled. While in v5, you could create a shared history object and pass it to the Router, v6 requires a different approach.

Problem:

How can you navigate from outside components in react router v6, similar to the behavior in v5?

Solution:

To replicate the previous behavior, you can create a custom router that instantiates the history state as done in RRDv6 routers:

<code class="javascript">const CustomRouter = ({ history, ...props }) => {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });

  useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      {...props}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};</code>

Include this custom router in your application and pass your custom history object:

<code class="javascript">export default function App() {
  return (
    <CustomRouter history={history}>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </div>
    </CustomRouter>
  );
}</code>

Update:

React Router v6 surfaces a history router, allowing you to pass a custom history instance:

<code class="javascript">import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory({ window });

ReactDOM.render(
  <HistoryRouter history={history}>
    {/* The rest of your app goes here */}
  </HistoryRouter>,
  root
);</code>

Notes for RRDv6.4 :

For RRDv6.4 and Data routers, navigate outside of components using the router navigate function:

<code class="javascript">import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(...);

...

router.navigate(targetPath, options);</code>

The above is the detailed content of How to Navigate Outside of Components in React Router v6?. For more information, please follow other related articles on the PHP Chinese website!