@2890594972 2018-05-23T09:21:27.000000Z 字数 5780 阅读 845

react react-router(二)

react react教学

react-router

参考地址:
http://reacttraining.cn/
http://reacttraining.cn/web/guides/quick-start

1、create-react-app

react脚手架。

第一步、安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步、全局安装create-react-app

cnpm install -g create-react-app

第三步、通过create-react-app初始化一个项目

create-react-app my-app

第四步、在对应的项目文件夹下启动项目

npm start

2、脚手架项目的分析

index.js——一个react项目的入口文件.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>hello</h1>,document.getElementById('root'));

组件——
script：var App = React.createClass({});
node:

import React, { Component } from 'react';
class App extends Component{
    render(){
        return (
            <div>hello</div>
        )
    }
}

App.test.js——用于测试的一个js文件。

重构我们的项目：

2、react-router-dom

react路由。

npm install --save react-router-dom

如果遇到项目无法启动：重新npm install。——>npm start

使用步骤：

第一步

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

第二步：申明路由

<Router>
    <div>
        <Link to='/'></Link>
<Link to='/about'></Link>
<Link to='/topic'></Link>
        <Route exact path='/' component={ Home } />
<Route path='/about' component={ About } />
<Route path='/topic' component={ Topic} />
    </div>
</Router>

Router:相当于一个组件，申明一个路由的视图。
Link：用于表示路由路径的组件。
Route：用于展示对应路径的组件。

3、路径参数

<Route path='/:id' component={ Child }>
<Link to='/123' ></Link>

子组件中，就能得到这个id。

this.props.match.params.id

4、NavLink。作用和Link的作用是一样的。

但是如果你想给它添加一个actived激活状态的样式，可以考虑使用NavLink。

5、demo

示例1：

<div className='wrapper flex-box flex-col'>
    <div className='flex1'>
        <Route exact path='/' component={Home} />
        <Route path='/about' component={About} />
        <Route path='/child' component={Child} />
        <Route path='/topics' component={Topics} />
        <hr/>
    </div>
    <div className='flex-box height50'>
        <NavLink exact activeClassName="selected" className='flex1 center' to='/'>主页</NavLink>
        <NavLink activeClassName="selected" className='flex1 center' to='/about'>购物车</NavLink>
        <NavLink activeClassName="selected" className='flex1 center' to='/child'>我的店铺</NavLink>
        <NavLink activeClassName="selected" className='flex1 center' to='/topics'>个人中心</NavLink>
    </div>
</div>

示例2：

<div>
    <NavLink to='/123'>123</NavLink>
    <NavLink className='margin-left' to='/345'>345</NavLink>
    <NavLink className='margin-left' to='/mapbar_front'>mapbar_front</NavLink>
    <Route path='/:id' component={Child}></Route>
</div>
//Child
import React, { Component } from 'react';
class Child extends Component{
    componentDidMount(){
        console.log('props',this.props);
    }
    render(){
        return (
            <div>
                Child:{this.props.match.params.id}
            </div>
        )
    }
}
export default Child;

示例3：switch

<div className='wrapper flex-box flex-col'>
    <div className='flex1'>
        <Switch>
            <Route path='/home' component={Home} />
            <Route path='/about' component={About} />
            <Route path='/child' component={Child} />
            <Route path='/topics' component={Topics} />
        </Switch>
        <hr/>
    </div>
    <div className='flex-box height50'>
        <NavLink exact activeClassName="selected" className='flex1 center' to='/home'>主页</NavLink>
        <NavLink activeClassName="selected" className='flex1 center' to='/about'>购物车</NavLink>
        <NavLink activeClassName="selected" className='flex1 center' to='/child'>我的店铺</NavLink>
        <NavLink activeClassName="selected" className='flex1 center' to='/topics'>个人中心</NavLink>
    </div>
</div>

示例4：Redirect

<Router>
    <div className='wrapper flex-box flex-col'>
        <div className='flex1'>
            <Switch>
                <Redirect exact from='/' to='/home'/>
                <Route path='/home' component={Home} />
                <Route path='/about' component={About} />
                <Route path='/child' component={Child} />
                <Route path='/topics' component={Topics} />
            </Switch>
            <hr/>
        </div>
        <div className='flex-box height50'>
            <NavLink exact activeClassName="selected" className='flex1 center' to='/home'>主页</NavLink>
            <NavLink activeClassName="selected" className='flex1 center' to='/about'>购物车</NavLink>
            <NavLink activeClassName="selected" className='flex1 center' to='/child'>我的店铺</NavLink>
            <NavLink activeClassName="selected" className='flex1 center' to='/topics'>个人中心</NavLink>
        </div>
    </div>
</Router>

示例4、嵌套使用的Router

import React, { Component } from 'react';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
import Render from './Render/Render';
import Components from './Component/Component';
import Props from './Props/Props';
class Topics extends Component{
    render(){
        return (
            <div>
                <h1>
                    主题列表
                </h1>
                <Router>
                    <div>
                        <ul>
                            <li><Link to='/render'>使用 React 渲染</Link></li>
                            <li><Link to='/component'>组件</Link></li>
                            <li><Link to='/props'>属性 v. 状态</Link></li>
                        </ul>
                        <Route path='/render' component={Render} />
                        <Route path='/component' component={Components} />
                        <Route path='/props' component={Props} />
                    </div>
                </Router>
            </div>
        )
    }
}
export default Topics;

示例5、关于嵌套路由的另一种写法：

import React, { Component } from 'react';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
import Render from './Render/Render';
import Components from './Component/Component';
import Props from './Props/Props';
class Topics extends Component{
    render(){
        console.log(this.props);
        return (
            <div>
                <h1>
                    主题列表
                </h1>
                <ul>
                    <li><Link to={`${this.props.match.path}/render`}>使用 React 渲染</Link></li>
                    <li><Link to={`${this.props.match.path}/component`}>组件</Link></li>
                    <li><Link to={`${this.props.match.path}/props`}>属性 v. 状态</Link></li>
                </ul>
                <Route path={`${this.props.match.path}/render`} component={Render} />
                <Route path={`${this.props.match.path}/component`} component={Components} />
                <Route path={`${this.props.match.path}/props`} component={Props} />
            </div>
        )
    }
}
export default Topics;

react-router-dom
使用步骤：npm install --save react-router-dom (4.2);

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

最基本的使用：

import Home from './home/Home.js'
class App extends Component{
    render(){
        return (
            <Router>
                <div>
                    <Link to='/'>Home</Link>          
                    <Link to='/about'>About</Link>
                    <Route path='/' component={ Home } />
                    <Route path='/about' component={ About} />
                </div>
            </Router>
        )
    }
}

NavLink组件：作用是和Link组件是一样的。
不同点是：能够添加一个activeStyle/activeClass——让当前的link展示高亮。

Switch组件：Switch组件一般包裹在Route外面，它的作用是——匹配第一个符合条件的Route。

<Switch>  
    <Route path='/home' component={ Home } />
    <Route path='/about' component={ About } />
</Switch>

exact属性——能够使我们的Route只匹配其中的一个。

子组件中，也可以定义Router，也就是，可以实现嵌套的路由！！！

Route的另一种用法：

一般用法：<Route path='/' component={ Home } />
特殊用法：<Route to='/' children={(params)=>{
    if(params){
        return <h1>hello</h1>
    } else {
        return <h3>world</h3>
    }
}} />

根据参数的不同，展示不同的视图。