Question

我正在使用react-router-dom，发现<MemoryRouter>非常有用。但是，我仍然希望在浏览器中读取/写入URL的许多路由。我该如何实施呢？

由于

Answer 1

最好将您的应用包装在BrowserRouter和内部使用MemoryRouter中，只在您需要的地方使用

Answer 2

对于React Router v5，我认为您可以在需要的MemoryRouter内嵌套BrowserRouter，并使用useLocation检测路由更改。

此示例代码对我有用。

import React from 'react';
import {
  BrowserRouter, MemoryRouter, Switch, Route,
  useLocation
} from 'react-router-dom';

const NestedComponent = () => {
  return (
    <Switch>
      <Route exact path="/">
        <p>test</p>
      </Route>
    </Switch>
  );
};

const Component = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/browser-router">
          <MemoryRouter>
            <NestedComponent/>
          </MemoryRouter>
        </Route>
      <Switch>
    </BrowserRouter>
  );
};

export default Component;

React Router - 使用MemoryRouter和Router一起路由（某些链接使用内存而其他链接更改URL）

2 个答案: