< react router>: (路由)

< react router> (路由)：

思维导图：

 

Atrial   文件夹下的index.js 文件内容：

import React, { Component } from 'react'
import{
    Link,
}from 'react-router-dom'
export default class Atrial extends Component {
    render() {
        return (
            <div>
            <Link to='atrial/1'>文章一：</Link>
            <Link to='atrial/2'>文章二：</Link>
            </div>
        )
    }
}

 还有一种传递方式叫隐士传参：

import React, { Component } from 'react'
import{
    Link,
}from 'react-router-dom'
export default class Atrial extends Component {
    render() {
        return (
            <div>
            <Link to='atrial/1'>文章一：</Link>
            <Link to={{
                pathname:'/atrial/2',
                state:{
                    from:'artial'
                }
            }}>文章二：</Link>
            </div>
        )
    }
}
---------------------------------------------------
和上面的一样，只不过这里用到了隐士传参

 

 

Atrial 文件夹下的 ArtialDetall .js 的内容：

 

import React, { Component } from 'react'

export default class ArtialDetall extends Component {
    render() {

        console.log(this.props)
        return (
            <div>
                文章详情{this.props.match.params.id}
            </div>
        )
    }
}
 

 

Home 文件夹下的 index.js 内容：

import React, { Component } from 'react'

export default class Home extends Component {
    render() {
        return (
            <div>
                <h3>柚子小哥哥！</h3>
            </div>
        )
    }
}

 

 

Users 文件夹下的 index.js 内容：

import React, { Component } from 'react'

export default class Users extends Component {
    render() {
        return (
            <div>
                <h3>橙子小姐姐！</h3>
            </div>
        )
    }
}

 

NotFount 文件夹下的 index.js 的内容： （这个文件夹代表的是404）

import React, { Component } from 'react'

export default class NotFound extends Component {
    render() {
        return (
            <div>
                404
            </div>
        )
    }
}

 

Views 文件夹下的 index.js 的内容：(把Views 文件夹下的组件抛出去）

export { default as Home } from './Home'
export { default as Atrial } from './Atrial'
export { default as Users } from './Users'
export { default as ArtialDetall } from './Atrial/ArtialDetall'
export { default as NotFound } from './NotFound'

 

App.js 的内容：

/* eslint-disable no-unused-vars */
import React, { Component } from 'react'
import {Route, NavLink as Link,Redirect,Switch } from 'react-router-dom'
import {
  Home,
  Users,
  Atrial,
  ArtialDetall,
  NotFound,
} from './Views'

export default class App extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
      <ul>
        <li><Link to='/home'>首页</Link></li>
        <li><Link to='/users'>新闻</Link></li>
        <li><Link to='/atrial'> 娱乐</Link></li>
       </ul>   
       <Switch>
      <Route  path='/home' render={()=>{return <Home/>}}/>
      <Route  component={Users} path ='/users'/>
      <Route  component={Atrial} path='/atrial' exact/>
      <Route  component={ArtialDetall} path='/atrial/:id'/>
      <Route component={NotFound} path='/404'/>
      <Redirect to='/home' from='/' exact />
      <Redirect to='/404'/>
      </Switch>
      </div>
    )
  }
}

 

 

 

index.js 的内容：

 

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router , Route} from 'react-router-dom'
import App from './App';

ReactDOM.render(
<Router>
<Route component={App} />
</Router>,
document.getElementById('root'));

 

总结：

安装 router 的指令是：

npm i react-router-dom --save

## router 用到组件有：

* Router

* Route (里面参数有component / path='属性'), (可以嵌套！)

* BrowserRouter (没有#)

* HashRouter (有# )

* Link (相当与 a 标签)还有一个to

* NavLink (就加一个 class="active')

* Redirect (作用：跳转到一个路由上面！) to

* exact (完全匹配)

## component 和 render 的区别：

1. component 要优先于 render

2. render 可以传递参数

3. render 还可以做一些全线认证

 

## 发送数据的方式有：

1. ajax:

2. img:（以下是简单的例子：）

const img = new Image()

img.src='http://www.domainname.com/button-01.gif?x=1'

3. sendBeacon (兼容性不好，但成功率高。)

 

(这里的 配置的 404 组件 只是在这里简单的配置的以下)