Router

在React中使用react-router-dom路由

使用react构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在react中常用的有两个 包可以实现这个需求，是react-router和react-router-dom。这次主要对react-router-dom进行说明。

安装

先进入项目目录。在项目命令行中执行：npm install react-router-dom 

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

路由的内置组件

1.1 HashRouter和BrowserRouter表示一个路由的根容器，将所有的路由相关的都包裹在HashRouter或BrowserRouter里面，在一个网站中，只需要使用一次根路由就可以了。

1.2 区别： BrowserRouter--浏览器路由（属于后端路由）使用的是HTML5的新特性History,没有HashRouter(锚点定位)那样通用，低版本浏览器可能不支持。

               HashRouter--前端has路由（属于前端路由）在路径中包含#，相当于HTML的锚点定位

1.3Route 用来路由的，在Router上有两个比较重要的属性：path和component 注意事项：不应该在同一个router 上同时使用component和render渲染，component的优先级要高于render,如果同时使用render 会被忽略

1.4 Link 表示一个路由的链接 有一个属性是---to

 NavLink

区别：一个点击的时候跳转，另一个点击之后还会额外加一个类名，可以控制样式。

         如果更改class名的话就用activeClassName="xxx"

手动跳转页面

this.props.history.push("./home")

嵌套路由

JS实现路由跳转

jump(){
    window.location.href = "/news"  //js路由跳转的路径
}

render(){
    return (
        
            

                
这是网站的根目录
                

                {this.jump()}}>新闻
                

                
            
        
    );
}

 

App.js

import React from 'react';
import './App.css';
import Home from './Home';

function App() {
  return (
    
  );
}

export default App;

Home.js

import React, { Component } from 'react'
import {Route,Link,Switch} from "react-router-dom"

export default class First extends Component {
  render() {
    return (
      

            
首页
            
关于
            
新闻
            

               
                 
                 
                 
               
        
      
    )
  }
}        

路由传值