如何将 React Router 拆分为多个文件

Question

我的路由文件变得相当混乱，所以我决定将它们拆分成单独的文件。

我的问题是，如果我使用了 2 个单独的文件，则不会呈现第一个包含之后的文件：

const routes = (
  <div>
    <Switch>
      <Route exact path="/" component={Home} />
      {Registration} //Does get rendered

      //Everything below this does not get a route
      {Faq}
      <Route path="/login" component={login} />
      <Route component={NoMatch} />
    </Switch>
  </div>
);

如果我切换Faq，registration那么所有常见问题解答都将起作用。

注册路由.js

import Introduction from '../containers/Registration/Introduction';
import Login from '../containers/Login';

const Routes = (
  <Switch>
    <Route path="/login" component={Login} key="login" />,
    <Route path="/registration/introduction" component={Introduction} key="registration-intro" />
  </Switch>
);
export default Routes;

FaqRoutes.js

import Faq from '../containers/Faq';
import faqJson from '../json_content/faq/faq';
import FaqCategory from '../containers/Faq/faqCategory';

const Routes = (
  <Switch>
    <Route path="/faq/:category" component={FaqCategory} key="faqCat" />
    <Route path="/faq" render={props => <Faq data={faqJson} />} key="faq" />
  </Switch>
);
export default Routes;

Answer 1

也许您可以将它们移动到配置文件并从那里加载它们。

应用程序.tsx

import routes from "./routes";
const App: React.FC = () => {
  return (
      <BrowserRouter>
        <div>
          <Switch>
            {routes.data.map((entry) => {return (<Route {...entry}/>)})}
          </Switch>
        </div>
      </BrowserRouter>
  );
};

export default App;

路由器.ts

const routes = {data: [
        {
            key: "one",
            path: "/three"

        },
        {
            key: "two",
            path: "/two"
        }
    ]
}

export default routes;

这将使您的代码保持简单

Answer 2

尝试以下操作

注册路由.js

import Introduction from '../containers/Registration/Introduction';
import Login from '../containers/Login';

const Routes = (
  <React.Fragment>
    <Route path="/login" component={Login} key="login" />,
    <Route path="/registration/introduction" component={Introduction} key="registration-intro" />
  </React.Fragment>
);
export default Routes;