Node.js实现PC端类微信聊天软件（二）

Github StackChat

用到的React-Router

React-Router是React路由的解决方案之一，也可以使用别的库

安装

npm install react-router --save-dev

路由配置

react-router主要提供了几个组件来进行路由之间结构的组织

1. Router 所有路由组件的根
2. Route 路由组件

• path属性 匹配路径
• component属性 匹配路径渲染的组件

3. IndexRoute 配置默认页面

• component 渲染的组件

React.render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      {/* 当 url 为/时渲染 Dashboard */}
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

5. 根据路由的之间的嵌套关系和匹配路径，每个组件里都会有一个children属性来对应路由下的子组件

<div>
  this.props.children
<div>

6. 如果一个路由要同时更新多个组件

component={{component1:xxx,component2:xxx}}

History

React Router 是建立在 history 之上的。一个 history 知道如何去监听浏览器地址栏的变化

import { browserHistory } from 'react-router'

组件生命周期

componentDidMount() //渲染组件
componentWillUnmount() //卸载组件

今日完成

今天在使用React-Router发现比较不适合之前UI的设计，折腾了一会选择放弃Router，直接使用最顶层的State来进行切换渲染组件

render() {
      return (
        <div>
          <LeftNav onChangeLeft={this.changeLeftSidebar} onChangeRight={this.changeRightSidebar}/>
          {this.componentMap[this.state.LeftSidebar]}
          <ChatBar />
          <Sidebar species={this.state.RightSidebar}/>
        </div>
      )
    };

将顶层组件内部的State修改方法传递给子组件通过回调进行修改和直接传递要渲染组件的信息