reactjs - 使用 React Router v4 的多种布局

Question

我正在努力尝试使用 React Router v4 渲染多个布局。

例如，我希望具有以下路径的页面具有布局 1：

• 确切路径="/"
• 路径="/博客"
• 路径="/关于"
• 路径="/项目"

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

• 路径="/blog/:id
• path="/project/:id

实际上，除了 v4 之外，这里要回答的问题：为 react-router 组件使用多种布局

Answer 1

其他答案都没有，所以我想出了以下解决方案。我在最高级别使用render道具而不是传统道具。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>
    );
  }
}

Answer 2

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

一篇对我有帮助的非常好的文章：https ://simonsmith.io/reusing-layouts-in-react-router-4/

最后你将使用这样的东西：

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

Answer 3

我利用您的两种解决方案解决了这个问题：

我的 Routes.js 文件

import BaseWithNav from './layouts/base_with_nav';
import BaseNoNav from './layouts/base_no_nav';

function renderWithLayout(Component, Layout) {
  return <Layout><Component /></Layout>
}

export default () => (
  <Switch>
    {/* Routes with Sidebar Navigation */}
    <Route exact path="/" render={() => renderWithLayout(Home, BaseWithNav)} />

    {/* Routes without Sidebar Navigation */}
    <Route path="/error" render={() => renderWithLayout(AppErrorMsg, BaseNoNav)} />
    <Route path="/*" render={() => renderWithLayout(PageNotFound, BaseNoNav)} />
  </Switch>
)

Base.js（导入路由的地方）

export default class Base extends React.Component {
  render()  {
    return (
      <Provider store={store}>
        <Router>
          <Routes />
        </Router>
      </Provider>
    )
  }
}

布局

BaseWithNav.js

class BaseWithNav extends Component {
  constructor(props) {
    super(props);
  }

  render() {        
    return <div id="base-no-nav">
      <MainNavigation />
      <main>
        {this.props.children}
      </main>
    </div>
  }
}

export default BaseWithNav;

BaseNoNav.js

class BaseNoNav extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let {classes} = this.props;

    return <div id="base-no-nav">
      <main>
        {this.props.children}
      </main>
    </div>
  }
}

export default BaseNoNav;

我希望这有帮助！

Answer 4

我知道我回复晚了，但这样做很容易，我希望它对新手有所帮助。我正在使用反应 4

布局.js

export default props => (
    <div>
        <NavMenu />
        <Container>
            {props.children}
        </Container>
    </div>
);

登录布局.js

export default props => (
    <div>
        <Container>
            {props.children}
        </Container>
    </div>
);

现在终于有了我们的应用程序

应用程序.js

function renderWithLoginLayout(Component, Layout) {
    return <LoginLayout><Component /></LoginLayout>
}

function renderWithLayout(Path, Component, Layout) {
    return <Layout><Route path={Path} component={Component} /></Layout>
}


export default () => (
    <Switch>
        <Route exact path='/' render={() => renderWithLayout(this.path, Home, Layout)} />
        <Route path='/counter' render={() => renderWithLayout(this.path, Counter, Layout)} />
        <Route path='/fetch-data/:startDateIndex?' render={() => renderWithLayout(this.path, FetchData, Layout)} />
        <Route path='/login' render={() => renderWithLoginLayout(Login, LoginLayout)} />
    </Switch>
);