使用react-router在所有页面上创建通用标题和侧边栏

IT技术 reactjs redux react-router react-redux react-router-v4
2021-05-05 01:28:19

应用程序.js

class App extends Component {
    render() {
    return (
      <Router history={history}>
        <Switch>
          <Route path="/" exact component={Login} />
          <div>
            <Header />
            <div className="main">
              <SideBar />
              <Route
                path="/dashboard"
                exact
                component={RequireAuth(Dashboard)}
              />
              <Route path="/profile" exact component={RequireAuth(Profile)} />
            </div>
          </div>
        </Switch>
      </Router>
   );
 }
}

在这里，我希望标题和侧边栏在我更改路线时在所有页面中通用，并且我得到了结果，但我认为这不是这样做的标准方法，请建议并帮助我，我应该如何创建通用某些页面的布局和其他页面的另一种布局，例如

 <Router history={history}>
  <Switch>
   <layout1>
    <Route path="/dashboard" exact component={RequireAuth(Dashboard)}/>
    <Route path="/profile" exact component={RequireAuth(Profile)} />
   </layout1>

   <layout2>
    <Route path="/otherinfo1" exact component={RequireAuth(OtherInfo1)}/>
    <Route path="/otherinfo2" exact component={RequireAuth(OtherInfo2)} />
   </layout2>
  </Switch>
 </Router>

我正在使用react-router 4.2.2

每次我登录并重定向到仪表板时，jquery 功能都不起作用，我总是需要刷新页面以运行 jquery 相关的东西（如果有帮助）

1个回答

您可以为两组带有标识符的路由添加前缀，并将其设置为路由路径，所有其他路由都可以进入各自的容器布局

<Router history={history}>
  <Switch>
   <Route path="/layout1" component={FirstContainer}/>
   <Route path="/layout2" component={SecondContainer}/>
  </Switch>
</Router>

那么你FirstContainer会像

const FirstContainer = ({match}) => (
    <div>
         {/* other stuff */}
         <Route path={`${match.path}/dashboard`} exact component={RequireAuth(Dashboard)}/>
         <Route path={`${match.path}/profile`} exact component={RequireAuth(Profile)} />
         {/* other stuff */}
    </div>

)

和 SecondContainer

const SecondContainer = ({match}) => (
    <div>
         {/* other stuff */}
         <Route path={`${match.path}/otherinfo1`} exact component={component={RequireAuth(OtherInfo1)}}/>
         <Route path={`${match.path}/otherinfo2`} exact component={RequireAuth(OtherInfo2)} />
         {/* other stuff */}
    </div>

)
其它你可能感兴趣的问题
上一篇React Native 31，新的 Appdelegate.m 没有要更改的本地主机：网络请求失败 下一篇Material UI / Webpack / React - 生产模式下的 className 优化/缩小