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;