react -- web react-router 和 component 篇

百度直接搜react路由的资料比较少，建议直接上github，头部就是docs链接了

文档虽然是英文的，但是很清楚，就算用谷歌直接翻译都很清晰（因为主要是代码，没啥文字）

docs ： https://reacttraining.com/react-router/web/example/url-params

路由

安装完脚手架，在*App.js*稍作修改

引入路由

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

修改<App />

 <Router>
    <div>
      <h2>这是react-router渲染出来的</h2>
      <Route path="/:id" component={Child}/>
    </div>
  </Router>

可以看出来，router竟然是组件格式，很棒的设计。

添加页面

Child

const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
)

组件component 竟然是函数

ok，看效果

效果

关于路由的精确定位问题
比如我要访问 / 但是如果直接写

<Route path="/" component={Home} />

访问 / 的时候是没有问题的，但是访问二级（以及更高）的路由，会发现，多了Home的渲染。比如访问 My

image.png

home页面也出来了，这时候给 / 添加 exact 就可以了

<Route exact path="/" component={Home} />

页面导入

Code

import React from 'react'
var title = 'Home Page'
export default class Repos extends React.Component {
    render() {
        return (
            <div>
                <h1>{title}</h1>
            </div>
        )
    }
}

大概这个格式，引入

import Home from './home'

然后就给component了

<Route exact path="/" component={Home} />

NavLink 转跳

一般都是用 Link,使用方法一样，引入就可以用了

不过NavLink更灵活（顾名思义，在Nav中使用），就介绍它

先引入

import { NavLink } from 'react-router-dom'

然后使用，Code

import { NavLink } from 'react-router-dom'

var activeNavStyle = {
    color: 'red'
}

var FootComponent = React.createClass({
  render: function() {
    return (
        <div>
            <NavLink to="/" exact activeStyle={activeNavStyle}>首页</NavLink>
            <NavLink to="/my" activeStyle={activeNavStyle}>我的</NavLink>
        </div>
    )
  }
})

activeStyle 是处于当前路由的时候展示的样式，还有一个Api是 activeClassName

这里用了 exact 是为了精确匹配当前的位置

除了exact 还有strict 他是在精确匹配，并且后面还有 / 的时候才被执行

还有一个isActive的API，当路由被激活的时候，会执行这个函数

isActive = { (match, location)={console.log('劳资被激活了')} }

<br />

组件

创建组件

var component = React.createClass({
  render: function() {
    return <h1>come on！</h1>
  }
})

使用

不需要像vue 或者 angular 一样需要在声明，只要在同一个作用域下（同一个js文件下），直接导入

<!-- 后面记得加标签结束标记 / -->
<component />

创建Js组件

NavLink 为例子（下面的二大金刚）

import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom'
import { NavLink } from 'react-router-dom'

var activeNavStyle = {
    color: 'red'
}

class Foot extends Component {
  render() {
    return (
        <div>
            <NavLink to="/" exact activeStyle={activeNavStyle}>首页</NavLink>
            <NavLink to="/my" activeStyle={activeNavStyle}>我的</NavLink>
        </div>
    )
  }
}

export default Foot;

导入

import Foot from './components/foot'

效果(修改了下样式，可能跟上面的代码不大一样）

image.png

Tips： JSX里面 class的写法是 calssName

<div className="foot"></div>

注释的话是

{/**/}

OK ,好了。

参考链接： https://reacttraining.com/react-router/web/api/NavLink/activeClassName-string

--end--