React路由的使用

React路由

1.React路由的安装

在项目命令行中，执行

cnpm install react-router-dom -S

下载到生产环境的依赖中。

在组件中通过对象的解构方式去获取到react-router-dom内置组件，在组件中，按需引入内置组件，在页面中进行使用：

2.React路由内置组件

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

2.1HashRouter和BrowserRouter的区别；

BrowserRouter：
　　原理是H5的history API，IE9及以下不兼容，需要由web server支持，在web client这边window.location.pathname被react router解析，example.com/react/route
　　
HashRouter：
　　原理是URL的hash，不需要由web server支持，因为它的只有‘/’path需要由web server支持，而#/react/route URL不能被web server读取，在web client这边window,location.hash被react router解析，example.com/#/react/route

3.React路由的跳转

思路：

• 创建要是用的二级路由

• 先引入要是用的模块

React路由的跳转代码

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 {HashRouter,Route,Link} from 'react-router-dom'
class App extends React.Component{

    render(){
       
        return (
                // 根容器
                <HashRouter>
                <div>
                    <h1>这是根目录</h1>
                    <hr/>
                    {/* 链接 */}
                   <Link to="/home">首页</Link>&nbsp;&nbsp;
                   <Link to="/news">新闻</Link>&nbsp;&nbsp;
                   <Link to="/about">关于我们</Link>
                    <hr/>
                    {/* 路由规则，Route是配置路由的规则，同时也是一个占位符 */}
                    <Route path="/home" component={Home} /> 
                    <hr/>
                    <Route path="/news" component={News}></Route>
                    <hr/>
                    <Route path="/about" component={About}></Route>

                </div>
                </HashRouter>
        );
    }
}
export default App;

About.js代码内容

import React from 'react';
class About extends React.Component{
    render(){
        return (
            <div>关于我们</div>
        );
    }
}
export default About;

Home.js代码内容

import React from 'react';
class Home extends React.Component{
    render(){
        return (
            <div>首页</div>
        );
    }
}
export default Home;

News.js代码内容

import React from 'react';
class News extends React.Component{
    render(){
        return (
            <div>新闻</div>
        );
    }
}
export default News;

注意

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

4.React路由的传值

通过配置路由的地址，在Link跳转时

• Route path路径后面 /:id （key）
• Link to 路径后面 /top/10 （value）接收传值：
• class类组件，this.props.match.params.属性名
• 函数组件：形参.match.params.属性名

代码实例：

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 News from './component/News'
import {HashRouter,Route,Link} from 'react-router-dom'
class App extends React.Component{
    render(){
        return (
                <HashRouter>
                <div>
                    {/* 链接 */}
                   <Link to="/news/top/12.html">新闻</Link>&nbsp;&nbsp;
                    <Route path="/news/:type/:id" exact component={News}></Route>
                </div>
                </HashRouter>
        );
    }
}

export default App;

News.js代码

import React from 'react';
class News extends React.Component{
    constructor(props){
        super();
        this.state = {
            p: props.match.params
        }
    }

    render(){
        return (
            <div>
                 {/* 新闻--{this.props.match.params.type}--{this.props.match.params.id} */}
                 新闻--{this.state.p.type}--{this.state.p.id}
            </div>
        );
    }
}
export default News;

5.React路由的嵌套

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

下面为一级路由，在一级路由Home为路由组件

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 {HashRouter,Link,Route} from 'react-router-dom'
import News from './Component/News'
class App extends React.Component{
  render(){
    return(
      <HashRouter>
        <div>
          <Link to='/news'>新闻</Link>&nbsp;&nbsp;
          <br/>
          <Route path='/news' component={News}></Route>
         </div>
      </HashRouter>
    )
  }
}
export default App;

News.js代码代码内容

import React from 'react'
import {Link,Route} from 'react-router-dom';
import Xw from './new/Xw'
class News extends React.Component{
    render(){
        return(
            <div>
            <Link to='/news/xw'>新闻</Link>
            <Route path='/news/xw' component={Xw}></Route>
            </div>
        )
    }
}
export default News;

在Conomponent下在创建一个news文件夹里面生成二级路由Xw.js

Xw.js代码内容

import React from 'react'
import {Link,Route} from 'react-router-dom';
import Xw from './new/Xw'
class News extends React.Component{
    render(){
        return(
            <div>
            <Link to='/news/xw'>新闻</Link>
            <Route path='/news/xw' component={Xw}></Route>
            </div>
        )
    }
}
export default News;