使用React Router v4的多个布局

我拉着我的头发试图使用React Router v4渲染多个布局。使用React Router v4的多个布局

举例来说，我想用下面的路径页面有布局1：

确切路径= “/”
路径= “/博客”
路径=“/约“
路径=”/项目”

和下面的路径具有布局2：

路径= “/博客/：ID
路径=”/项目/：ID

切实什么东西被在这里找到答案，但对于V4：Using multiple layouts for react-router components

来源

2017-04-10 redstripepapi

你需要在这些航线上的顶部创建一个逻辑来处理显示基于路径上的布局。然后将路线添加到该布局并渲染 –

如果您可以提交一些代码来演示如何实现这一点，那将非常有用。 @ReiDien – redstripepapi

所以，对于这一点，你应该使用渲染功能（https://reacttraining.com/react-router/core/api/Route/render-func）

一个真正的好文章，帮助我：https://simonsmith.io/reusing-layouts-in-react-router-4/

你到底会用什么升ike this：

<Router> 
<div> 
    <DefaultLayout path="/" component={SomeComponent} /> 
    <PostLayout path="/posts/:post" component={PostComponent} /> 
</div> 
</Router>

来源

2017-04-20 11:25:32

非常感谢！这些链接非常有用。 – amiregelz

没有其他的答案工作，所以我想出了以下解决方案。我在最高级别使用了道具而不是传统的component道具。

它使用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> 
    ); 
    } 
}

来源

2017-06-21 03:27:35

有史以来最令人惊叹的答案 –

使用React Router v4的多个布局

回答

相关问题