reactjs – 使用React Router v4的多个布局

发布时间：2020-12-15 20:44:01 所属栏目：百科来源：网络整理

导读：我正试着用React Router v4渲染多个布局. 例如,我想要具有以下路径的页面具有布局1： exact path =“/” path =“/ blog” path =“/ about” path =“/ projects” 以及具有布局2的以下路径： path =“/ blog /：id path =“/ project /：id 有效地回答了这

我正试着用React Router v4渲染多个布局.

例如,我想要具有以下路径的页面具有布局1：

> exact path =“/”
> path =“/ blog”
> path =“/ about”
> path =“/ projects”

以及具有布局2的以下路径：

> path =“/ blog /：id
> path =“/ project /：id

有效地回答了这里的问题,但是对于v4：Using multiple layouts for react-router components

其他答案都没有用,所以我提出了以下解决方案.我使用了 render道具而不是最高级别的传统组件道具.

它使用layoutPicker函数根据路径确定布局.如果该路径未分配给布局,则返回“错误路由”消息.

import SimpleLayout from './layouts/simple-layout';
import FullLayout from './layouts/full-layout';

var layoutAssignments = {
  '/': FullLayout,'/pricing': FullLayout,'/signup': SimpleLayout,'/login': SimpleLayout
}

var layoutPicker = function(props){
  var Layout = layoutAssignments[props.location.pathname];
  return Layout ? <Layout/> : <pre>bad route</pre>;
};

class Main extends React.Component {
  render(){
    return (
      <Router>
        <Route path="*" render={layoutPicker}/>
      </Router>
    );
  }
}

simple-layout.js和full-layout.js遵循以下格式：

class SimpleLayout extends React.Component {
  render(){
    return (
      <div>
        <Route path="/signup" component={SignupPage}/>
        <Route path="/login" component={LoginPage}/>
      </div>
    );
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!