Question

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

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

exact path =“/”
路径= “/博客”
路径= “/约”
路径= “/项目”

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

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

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

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

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

Layout.js

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

LoginLayout.js

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

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

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

使用React Router v4的多个布局

4 个答案: