Comment naviguer en dehors des composants dans React Router v6 ?

react router v6 : naviguer en dehors des composants

React Router v6 introduit des changements dans la façon dont les objets d'historique sont gérés. Alors que dans la v5, vous pouviez créer un objet d'historique partagé et le transmettre au routeur, la v6 nécessite une approche différente.

Problème :

Comment naviguer de l'extérieur composants dans React Router v6, similaire au comportement dans v5 ?

Solution :

Pour reproduire le comportement précédent, vous pouvez créer un routeur personnalisé qui instancie l'état de l'historique comme cela se fait dans les routeurs RRDv6 :

<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>

Incluez ce routeur personnalisé dans votre application et transmettez votre objet d'historique personnalisé :

<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>

Mise à jour :

React Router v6 fait apparaître un routeur d'historique, vous permettant de transmettre une instance d'historique personnalisée :

<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 pour RRDv6.4 :

Pour RRDv6.4 et routeurs de données, naviguez en dehors des composants à l'aide de la fonction de navigation du routeur :

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

const router = createBrowserRouter(...);

...

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!