< 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 组件 只是在这里简单的配置的以下)