发布房源（一）——相关组件路由配置 & SearchBar组件

发布房源——相关组件路由配置 & SearchBar组件

相关组件路由配置

• 配置路由,登录成功后,进入到发布房源的组件
  • Login -> 登录成功后,进入到发布房源/rent/add
  • 配置准备好的三个组件
    • Rent房源列表
    • RentAdd发布房源
    • RentSearch搜索发布的房源所在的小区

<AuthCheck exact path='/rent' component={Rent}/>
<AuthCheck path='/rent/add' component={Add}/>
<AuthCheck path='/rent/search' component={Search}/>

相关组件代码结构分析

• Rent/index.js

  1. 显示发布的房源列表
  2. 如果没有登录->进入Login
  3. 每条房源信息->点击进入详情 detail

• Search/index.js

  地址：https://mobile.ant.design/components/search-bar-cn/

  1. 点击取消 -> 返回Add发布房源
  2. SearchBar组件
  3. 搜索提示列表

• Add/index.js

  1. 各种表单元素(受控组件)
  2. 点击小区名称的输入框->进入Search
  3. 取消按钮->返回到上一页

• Home/Index->菜单中的第四个->点击进入发布房源Add

• AuthCheck组件重构：向相应组件注入history对象

class AuthCheck extends React.Component {
  render () {
    // 从<AuthCheck/>组件属性中获取的值
    // componet需要重命名，组件首字母必须大写
    let { path, component: Component } = this.props
    // 这里可以控制路由权限
    // 判断用户是否登录
    if (!token.getToken()) {
      // 没有登录，重定向到登录页面
      return (
        <Route path={path} render={() => {
          return <Redirect to='/login'/>
        }}/>
      )
    } else {
      // 通过withRouter高阶组件向Component中注入history对象
      let MyComponet = withRouter(Component)
      return (
        <Route path={path} render={() => {
          return <MyComponet/>
        }}/>
      )
    }
  }
}

登录页

房源信息页