使用反应路由器在所有页面上创建通用标题和侧边栏 [英] creating common header and sidebar across all the page using react router

问题描述

<块引用>

App.js

class App 扩展组件 {使成为() {返回 (<路由器历史={历史}><开关><Route path="/" 精确组件={Login}/><div><标题/><div className="main"><侧边栏/><路线路径=/仪表板"精确的组件={RequireAuth(仪表板)}/><Route path="/profile" 精确组件={RequireAuth(Profile)}/>

</开关></路由器>);}}

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

 <路由器历史={历史}><开关><布局1><Route path="/dashboard" 精确组件={RequireAuth(Dashboard)}/><Route path="/profile" 精确组件={RequireAuth(Profile)}/></layout1><布局2><Route path="/otherinfo1" 精确组件={RequireAuth(OtherInfo1)}/><Route path="/otherinfo2" 精确组件={RequireAuth(OtherInfo2)}/></layout2></开关></路由器>

<块引用>

我使用的是反应路由器 4.2.2

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

解决方案

你可以给两组路由加上一个标识符，并将其设置为路由路径，所有其他路由都可以进入各自的容器布局

<开关><Route path="/layout1" component={FirstContainer}/><Route path="/layout2" component={SecondContainer}/></开关></路由器>

然后你 FirstContainer 会像

const FirstContainer = ({match}) =>(<div>{/* 其他的东西 */}<路由路径={`${match.path}/dashboard`} 精确组件={RequireAuth(Dashboard)}/><路由路径={`${match.path}/profile`} 精确组件={RequireAuth(Profile)}/>{/* 其他的东西 */}

)

和 SecondContainer

const SecondContainer = ({match}) =>(<div>{/* 其他的东西 */}<路由路径={`${match.path}/otherinfo1`} 精确组件={component={RequireAuth(OtherInfo1)}}/><路由路径={`${match.path}/otherinfo2`} 精确组件={RequireAuth(OtherInfo2)}/>{/* 其他的东西 */}

)

App.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>
   );
 }
}

Here i want Header and Sidebar to be common across all the pages while i change the route and i am getting the result but i think it is not a standard way to do so,please suggest and help me,that how should i create the common layout for some set of pages and another layout for other pages,like

 <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>

i am using react router 4.2.2

and every time i login and redirect to dashboard, jquery functionality doesn't work, always i need to refresh the page to run jquery related stuffs(if could help)

解决方案

You could prefix, you two sets of routes with an identifier and set that as a Route path, All other routes can go inside the respective container Layout

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

Then you FirstContainer would be like

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>

)

and 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>

)

这篇关于使用反应路由器在所有页面上创建通用标题和侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！