如何使用 reactjs 和 react-router 实现正确的布局

Question

如何使用 reactjs 和 react-router 实现正确的布局。基本上我想要实现的是下图所示的内容：

注意：我不想在 index.html 中实现 header & footer。

到目前为止我所做的工作是：

import React from 'react';
import { Router, Route, Link } from 'react-router'


class App extends React.Component {
    render(){
    return <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/home">Home</Link></li>
          <li><Link to="/blog">Blog</Link></li>
          <li><Link to="/portfolio">Portfolio</Link></li>
          <li><Link to="/social">Social</Link></li>
          <li><Link to="/about">about</Link></li>
        </ul>
        {this.props.children}
      </div>
  }
}

class Home extends React.Component {
  render(){
    return <p>home</p>
  }
}

class Blog extends React.Component {
  render(){
    return <p>blog</p>
  }
}

class Portfolio extends React.Component {
  render(){
    return <p>portfolio</p>
  }
}

class Social extends React.Component {
  render(){
    return <p>social</p>
  }
}

class About extends React.Component {
  render(){
    return <p>about</p>
  }
}

let routes = <Router>
      <Route path="/" component={App}>
        <Route path="home" component={Home} />
        <Route path="blog" component={Blog} />
        <Route path="portfolio" component={Portfolio} />
        <Route path="social" component={Social} />
        <Route path="about" component={About} />
      </Route>
    </Router>

React.render(routes, document.body);

上面的代码工作正常，但我需要将应用程序分成 3 个组件 - > <Header />、content 和 <Footer />

类似于：

class App extends React.Component {
  render(){
    return <Header />
           {this.props.children}
           <Footer />
  }
}

class Footer extends React.Component {
  render(){
    return <div>Footer</div>
  }
}


class Header extends React.Component {
  render(){
    return <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/home">Home</Link></li>
          <li><Link to="/blog">Blog</Link></li>
          <li><Link to="/portfolio">Portfolio</Link></li>
          <li><Link to="/social">Social</Link></li>
          <li><Link to="/about">about</Link></li>
        </ul>
      </div>
  }
}

但是当我实现它时路由不起作用并且我没有收到任何错误，我认为这与 {this.props.children} 有关，所以..知道如何完成它吗？

Answer 1

您的渲染函数转换为：

function render() {
  return React.createElement(Header, null);
  {
    this.props.children;
  }
  React.createElement(Footer, null);
}

您没有看到任何错误，因为这是有效的，但包含无法访问的代码。它只是 return 一个 Header 元素。

您需要将其内容包裹在另一个元素中，例如：

class App extends React.Component {
  render() {
    return <div>
      <Header/>
      {this.props.children}
      <Footer/>
    </div>
  }
}

编辑：假设您在 React 的上下文之外编写了这段代码 - 您希望它达到什么目的 return？

function render() {
  return 'Header';
         'Content';
         'Footer';
}

这是 3 个独立的语句，由于第一个语句是 return，因此后两个语句无关紧要，因为它们永远无法到达。

为了从一个函数中 return 多个对象，您需要将它们放在某种容器中，例如一个数组：

function render() {
  return [
    'Header',
    'Content',
    'Footer'
  ]
}

但是，你不能在 React 组件的 render() 方法中执行此操作，如 they must return either a React component, null, or false，因此如果你想 return 多个，你需要用另一个元素包装内容项目。

如何使用 reactjs 和 react-router 实现正确的布局

How implement a proper layout using reactjs and react-router

javascript

layout

url-routing

reactjs

react-router