react 学习篇

• react-router React Router 核心
• react-router-dom 用于 DOM 绑定的 React Router
• react-router-native 用于 React Native 的 React Router
• react-router-redux React Router 和 Redux 的集成
• react-router-config 静态路由配置的小助手
• 组件化严格区分，结构清晰

简单的react项目 搭建完毕 路由页面切换 组件引用

自动搭建react项目 create-react-app

npm install -g create-react-app 
create-react-app my-app

cd my-app
npm start

路由 react-router-dom

路由页面来源 react-router-dom比react-router多出了 这样的 DOM 类组件。 因此我们只需引用 react-router-dom 这个包就行了

npm install react-router

使用方法

router例子

App组件使我们引入的组件，在这个组件里面，我们需要注意到最外层的Router

这个是路由容器，我们路由规则Route需要包裹在日期里面

Route包含了两个属性，path 和 component

path指向的路由路径，component指向的是要跳转的组件

我们路由导航，一般是Link和NavLink两个

这两个功能一样，都是路由跳转，但是NavLink有一个属性用来显示跳转选中的样式，activeStyle属性，写显示高亮样式的，接收一个对象{}

在我们路由导航有一个to属性

to属性是我们路由的要跳转的路径

app.js 路由组件

import React, { Component } from 'react';
import {BrowserRouter,Route,Switch} from 'react-router-dom';
import Index from './index/index';
import List from './list/list';

import Footer from '../components/footer/footer';

// 渲染页面
class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Route exact path='/'  component={Index}/>
                    <Route  path='/list' component={List}/>
                    <Switch>
                        <Footer/>
                    </Switch>
                </div>
            </BrowserRouter>
        );
    }
}

export default App;

footer.js 底部组件

因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。

import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
import './footer.css';

class Footer extends Component {
    render() {
        return (
            <footer>
                <ul className="tab">
                    <li>
                        <NavLink to="/" exact activeClassName='active'>
                            <span className="tab_link">主页</span>
                        </NavLink>
                    </li>
                    <li>
                        <NavLink to="/list" activeClassName='active'>
                            <span className="tab_link">列表</span>
                        </NavLink>
                    </li>
                </ul>
            </footer>
        )
    }
}

export default Footer;

@import "../../common/stylus/variable"

.tab
  position: fixed
  left: 0
  right: 0
  bottom: 0
  z-index: 999
  display: flex
  height: 44px
  line-height: 44px
  font-size: $font-size-medium
  background-color: #222
  li
    flex: 1
    text-align: center
    a
      display: block
      padding-bottom: 5px
      color: $color-text-l
    .active
      .tab_link
        color: $color-theme

index.js 首页 引用Headersmart 组件 header.js

import React, {Component} from 'react';
import Headersmart from './header.js'

class Index extends Component {
    render() {
        return(
            <div className='wrapper'>
                <Headersmart/>
            </div>
        )
    }

}

export default Index;

Headersmart

import React,{Component} from 'react';
import Header from '../../components/index/header/header.js';

class Headersmart extends Component{
    render(){
        return(
            <div>
                <Header/>
            </div>
        )
    }
}

export default Headersmart;

header.js 引入header组件

import React, {Component} from 'react';

function formatName(user) {
    return user.a + '' + user.b;
}

const user = {
    a: '我是',
    b: '张三'
}

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

// 渲染页面
class Header extends Component {
    render() {
        return (
            <div>
                <h2>1233</h2>
                <h1>
                    Hello, {formatName(user)}!
                </h1>
                <div>
                    <Welcome name="Sara"/>
                </div>
            </div>
        );
    }
}

export default Header;

list.js

import React, { Component } from 'react';

// 渲染页面
class List extends Component {
    render() {
        return (
            <div>list</div>
        );
    }
}

export default List;