如何使用 React Router 6 提升状态？

Question

我想知道如何在我的两条路线之间共享状态。我应该将状态从我的

AddContact

组件提升到

Layout

还是

App

以共享到

ContactList

。我的

Layout

组件只是渲染一个

Header

和

Outlet

组件。

function App() {
  const [contacts, setContacts] = useState([])

  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Layout />}>
          <Route path='/' element={<ContactList />} />
          <Route path='/add' element={<AddContact />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Answer 1

你可以把它举到任何一个。

如果提升状态到

App

你可以将你需要的东西作为道具传递给每个路由组件。

例子：

function App() {
  const [contacts, setContacts] = useState([]);

  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Layout />}>
          <Route
            path="/"
            element={<ContactList contacts={contacts} />}
          />
          <Route
            path="/add"
            element={<AddContact setContacts={setContacts} />}
          />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

另一种方法是在

Layout

布局路由组件中定位状态，并通过

Outlet

组件的上下文公开。路由组件将通过

useOutletContext

挂钩访问提供的上下文值。

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Layout />}>
          <Route path="/" element={<ContactList />} />
          <Route path="/add" element={<AddContact />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

const Layout = () => {
  const [contacts, setContacts] = useState([]);

  return (
    ...
    <Outlet context={{ contacts, setContacts }} />
    ...
  );
};

const ContactList = () => {
  const { contacts } = useOutletContext();

  ...
};

const AddContact = () => {
  const { setContacts } = useOutletContext();

  ...
};

在我看来，这基本上归结为偏好或范围，例如有多少子 ReactTree 需要访问状态。