React路由最全详解

react并没有提供像Vue专门创建路由的页面，react路由需要先安装，然后导入才能使用，下面是react路由从安装到实现的详细步骤，一起来看看吧！

开始前的准备：本案例需要先改造一下react项目的index.js文件

，关闭严格模式，路由才可正常跳转，否则会出现导航栏显示已跳转但是页面未跳转的情况！！ 

1：首先安装

npm i [email protected]

react路由可以指定安装版本，我安装的是5.0版本的

2：在APP.js页面中导入

上图中路由组件的意思：

 

使用哪个导入哪个即可

3：使用路由

页面效果 

4：路由传参 

 

页面效果，123页面

abc页面

 

 路由属性笔记

 5：匹配404页面

 

 页面效果

6：权限管理，某些特定页面只有在登录之后才能进入

 具体效果看下面动图

 以上就是react路由的基本使用，以下是本案例的源码

7：源码

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//navlink 导航链接
// Redirect 重定向
// Switch一次匹配一个页面
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (
        

            首页 |
            关于页面 |
            abc详情 |
            123详情 |
            管理页面 |
            登录 |
        
        

          
            
            
            
            
                
            
            
            
            {/* * 匹配任意路径 */}
            
         
        
    );
}
export default App;
// 把props.children 解构为children  ...rest 剩余的其他参数
function Private({ children, ...rest }) {
    // 把Private组件的参数除了children全部转移到Route组件中
    // Route不直接指定component通过render渲染出来
    return  {
            // 如果获取本地存储的isLog为true(登录过了)，返回children子节点Admin 否则就返回一个Redirect组件
            // Redirect默认跳转到 /login登录页面 传入一个state数据 redirect自定义值 location.pathname(本来要跳转的地址)
            return localStorage.getItem("isLog")?(children):
        }
    }>
}
function Login({location,history}){
  function logIt(){
      // 存储到本地
      localStorage.setItem("isLog",true);
      // 获取redirect信息
      var redirect = location.state.redirect||"/";
      // 如果没有拿到就跳转到首页
      history.push(redirect);
  }
  return

    
登录
    登录
  
}

// 404 页面
function NoMatch({location}){
  return (

    
404
    
当前地址找不到: {location.pathname}
    首页
  
)
}

function Admin(){
  return 

    
Admin页面
    
概览 |订单列表 
    
    
    
  
}
function Dash(){
  return 

    
概览页面
  
}
function OrderList(){
  return 

    
订单列表页面
  
}

function Details({match,location}){
    return (

        
详情内容
        
参数：{match.params.id}
        
match:{JSON.stringify(match)}
        
location:{JSON.stringify(location)}
    
);
}
// match 是匹配的路由参数
// path 路径
// url  地址
// isExact是否精确匹配
// params 路由的参数
function Home({history}){
  
    return (

        
首页内容
        返回
    
);
}
// 不同NavLink跳转到首页
function About({match,history,location}){
    return (

        
关于内容
        history.push('/')}>首页
        history.replace('/')}>首页-replace
        console.log(history)}>输出历史记录
        详情abc

    
);
}

目录

开始前的准备：本案例需要先改造一下react项目的index.js文件

，关闭严格模式，路由才可正常跳转，否则会出现导航栏显示已跳转但是页面未跳转的情况！！ 

1：首先安装

2：在APP.js页面中导入

3：使用路由

4：路由传参 

 5：匹配404页面

6：权限管理，某些特定页面只有在登录之后才能进入

7：源码