reactjs - 在另一个组件中定义 React Router 路由

Question

我正在使用 react-router-dom 5.2.0。我想要 2 个定义我所有路线的文件。 1 个文件用于公共(public)路线，1 个文件用于私有(private)路线。当我点击 home 路由而不是/content 路由时，正确的组件呈现。

App.jsx 返回:

<BrowserRouter>
  <Switch>
    <PublicRoutes />
    <PrivateRoutes />
  </Switch>
</BrowserRouter>

PublicRoutes.jsx 返回:

<Route path="/" exact render={() => <h1>home route</h1>} />

PrivateRoutes.jsx 返回:

<Route path="/content" exact render={() => <h1>Content Route</h1>} />

我能够使用“home route”加载/，但是当我点击/content url 时没有任何渲染。

Answer 1

这些开关需要进入内部您的包装器路由，如下所示:

import { BrowserRouter, Switch, Route } from "react-router-dom";
import "./styles.css";

const PublicRoutes = () => (
  <Switch>
    <Route path="/" exact render={() => <h1>home route</h1>} />
  </Switch>
);
const PrivateRoutes = () => (
  <Switch>
    <Route path="/content" exact>
      <h1>Content Route</h1>
    </Route>
  </Switch>
);

export default function App() {
  return (
    <BrowserRouter>
      <PublicRoutes />
      <PrivateRoutes />
    </BrowserRouter>
  );
}

https://codesandbox.io/s/shy-river-ysv4w?file=/src/App.js