时间戳

首页 > 解决方案 > 在除根以外的所有路由上显示导航组件

reactjs - 在除根以外的所有路由上显示导航组件

问题描述

我需要在除根路线之外的所有路线上显示主导航。如果我要在所有路线上显示，我会这样做：

class App extends Component {
    render() {
        return (
            <Container className="App" maxWidth="lg">
                <Grid className="app-container">
                    <MainNav /> 
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route
                            exact
                            path="/some-other-route"
                            component={SomeOtherComponent}
                        />
                        ...
                    </Switch>
                </Grid>
            </Container>
        );
    }
}

我可以为所有其他路线制作一个包装器组件并将其放在那里，但我能想到的任何解决方案似乎都是错误的，可能有更好的方法。有没有更好的办法？

标签： reactjsreact-router

解决方案

也许您可以使用此代码。

下面的代码受到nextjs页面路由的启发。您只需添加您的路线~/pages/并动态导入它们。

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

function DynamicRoutes() {
  return (
    <BrowserRouter>
      <Switch>
        <Route
          path="/"
          render={({ history, location, match })=>{
            const Page = React.lazy(()=>{
              return import('./pages'+location.pathname).catch((e) => {
                if (/not find module/.test(e.message)) {
                  return import("./pages/NotFound");
                }
                if (/Loading chunk \d+ failed/.test(e.message)) {
                  window.location.reload();
                  return;
                }
                throw e;
              })
            });
            return (
              <React.Suspense fallback ={<div>Loading...</div>}>
                <Page />
              </React.Suspense>
            )

          }}
        />
      </Switch>
    </BrowserRouter>
  )
}
export default DynamicRoutes;

推荐阅读