React路由--Router --华某

路由传值

1.React-router-dom路由传值

代码如下：

创建入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'));

创建App.js
引入模块：

import React from 'react'

引入子文件：

import Home from './component/Home'
import News from './component/News'
import About from './component/About'

引入内置文件：

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

BrowserRouter:浏览器路由器（后端路由）
HashRouter：hash方式锚点路由地址栏以#号形式跳转（前端路由）

• HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了；
• Route表示一个路由规则，在Route上，有两个比较重要的属性，path，component
• Link表示一个路由的链接

当使用HashRouter把APP根组件的元素包裹起来之后，网站就已经启用路由了，在一个HashRouter中，只能有唯一的一个根元素。 在一个网站中，只需要使用唯一的一次就行了。
Route创建的标签，就是路由规则，其中path表示要匹配的路由，component表示要展示的组件。Route具有两种身份：1.它是一个路由匹配规则；2.它是一个占位符，表示将来匹配到的组件都放到这个位置

需要注意的地方：
1.Route 组件path地址是以/开头 ，配置component属性，是显示的组件，这个属性不可以大写
2.Route组件可以单双标签使用，单标签需要/结尾，双标签不可以在中间写入别的东西
3.Link to属性的地址也是/开头，Link在页面渲染的是a标签

现在开始写App.js文件

  <HashRouter>
                <div>
                    <h1>这是根目录</h1>
                    <hr />
                    <Link to='/home/top/77.html'>首页</Link>&nbsp;
                    <Link to='/news'>新闻</Link>&nbsp;
                    <Link to='/about'>关于我们</Link>
                    <hr />
                    <Route path='/home/:type/:id' component={Home}></Route>
                    <Route path='/news' component={News}></Route>
                    <Route path='/about' component={About}></Route>
                </div>
            </HashRouter>

在Route内置组件中，配置path地址：

<Route path='/home/:type/:id' component={Home}></Route>

在Link内置组件中，配置to属性，进行跳转：

<Link to='/home/top/77.html'>首页</Link>&nbsp;

然后就写子路由文件

 constructor(props){
           super()
           this.state = {
               a:props.match.params
           }
      }

    render(){
        return(
           <div>首页{this.state.a.type} {this.state.a.id}</div>
        )
    }

写到这里一个简单的路由传值就写完了

2.嵌套路由

嵌套路由：在路由组件中，使用Link， Route，配置子路由，实现跳转，切换；

嵌套代码具体如下：

<HashRouter>
                <div>
                    <h1>这是根目录</h1>
                    <hr />
                    <Link to='/home/top/77.html'>首页</Link>&nbsp;
                    <Link to='/news'>新闻</Link>&nbsp;
                    <Link to='/about'>关于我们</Link>
                    <hr />
                    <Route path='/home/:type/:id' component={Home}></Route>
                    <Route path='/news' component={News}></Route>
                    <Route path='/about' component={About}></Route>
                </div>
</HashRouter>

import React from 'react'
import { Link,Route } from 'react-router-dom'
import Qiqi from './news/Qiqi'

class News extends React.Component{

    render(){
        return(
            <div>


                <Link to='/news/qiqi'>七七是</Link>
                <Route path='/news/qiqi' component={Qiqi}></Route>
            </div>
        )
    }
}
export default News;

import React from 'react'
import { Link,Route } from 'react-router-dom'
import San from '../news/sq.js/San'


class Qiqi extends React.Component{

    render(){

        return(
            <div>
                <Link to='/news/qiqi/san'>三三的</Link>
                <Route path='/news/qiqi/san' component={San}></Route>
            </div>
        )
    }
}
export default Qiqi

import React from 'react'

class San extends React.Component{

    render(){
        return(
            <div>小宝贝</div>
        )
    }
}

export default San

简单的嵌套路由就写完了，代码顺序是从大到小，News套Qiqi，QIqi套San，最重要的是文件的路径一定要正确。

下次我们实现JS实现路由跳转，在这里华某祝崽种们圣诞节牛逼，提前祝崽种们新年牛逼！！！