react 四 react-router路由

2018-08-24

react的style的样式

1 直接写行内样式
<li style={{border:'1px solid red', fontSize:'12px'}}></li>
2 抽离为对象形式
var styleH3 = {color:'blue'}
var styleObj = {
  liStyle:{border:'1px solid red', fontSize:'12px'},
  h3Style:{color:'green'}
}

<li style={styleObj.liStyle}>
  <h3 style={styleObj.h3Style}>评论内容：{props.content}</h3>
</li>
3  使用样式表定义样式：
import '../css/comment.css'
<p className="pUser">评论人：{props.user}</p>

react 路由 reacr-router

Router组件本身只是一个容器，真正的路由通过Router组件定义

使用步骤

1：导入路由组件
import {
  HashRouter as Router,
  Link, Route
} from 'react-router-dom'
导入Router, Link ,Route组件
2：使用<Router></Router>作为根容器，包裹整个应用（JSX）
3：使用<link to='/movie'></Link>作为连接地址，并指定to属性
4：使用<Route path='/'  component={Movie}><Route> 展示路由内容
<Router>

    // 3 设置 Link
    <Menu.Item key="1"><Link to="/">首页</Link></Menu.Item>
    <Menu.Item key="2"><Link to="/movie">电影</Link></Menu.Item>
    <Menu.Item key="3"><Link to="/about">关于</Link></Menu.Item>

    // 4 设置 Route
    // exact 表示：绝对匹配（完全匹配，只匹配：/）
    <Route exact path="/" component={HomeContainer}></Route>
    <Route path="/movie" component={MovieContainer}></Route>
    <Route path="/about" component={AboutContainer}></Route>
//AboutContainer 可以是引入组件的名称
</Router>

注意点：

1：<Router></Router>：作为整个组件的根元素，是路由容器，只能有一个唯一的子元素
2：<Link></Link>：类似于vue中的<router-link></router-link>标签，to 属性指定路由地址
  若要使用多个<Link></Link>，必须在<Link></Link>外包裹一个标签，要不报错。这是router 4.0的改变。
3：<Route></Route>：类似于vue中的<router-view></router-view>，指定路由内容（组件）展示位置

路由参数

1 配置： 通过Router中的path属性来配置路由参数
<Route path="/movie/:movieType"></Route>
2 获取  this.props.match.params获取
const type = this.props.match.params.movieType

路由跳转

1 history.push() 方法用于js中页面的跳转
this.props.history.push('/movie/movieDetail/' + movieId)
2 history.go(-1)  用来实现页面的前进(1)和后退(-1)