跳到主要内容

react-router v6 路由拦截/路由鉴权

· 阅读需 4 分钟
Hanasaki
Hanasaki
阿巴阿巴阿巴

一个很常见的需求：有些路由，需要登录才能访问，不登陆的情况下访问它就跳转到登录页面。这里就用 Context 来写个路由鉴权的小例子。

react-router v6稳定版出来了，有许多改变，以前拦截路由的方式也用不成了。在世界之外遨游了好久终于找到了一篇文章，学废了！整理学习一下分享出来。

react-router v6 路由跳转时页面闪烁

· 阅读需 1 分钟
Hanasaki
Hanasaki
阿巴阿巴阿巴

安装react-router-dom的时候版本已经变成6.0.2了，没注意到，结果在写项目时候怪怪的，以往的写法都不对了，照着仓库的例子学了学发现跳转时闪屏。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {HashRouter,Route, Routes } from 'react-router-dom';
import User from './pages/User/User';
import Main from './pages/Main/Main'

ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <Routes>
        <Route path="/" element={<App />}>
          <Route path="user" element={<User />}/>
          <Route path="*" element={<Main />}/>
        </Route>
      </Routes>
    </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

官方仓库的教程只写了 <Router></Router>，虽然比#号看起来舒服，但是一跳转就闪。

使用 <HashRouter></HashRouter> 就不闪屏了。

npm 运行命令传入参数

· 阅读需 1 分钟
Hanasaki
Hanasaki
阿巴阿巴阿巴

写 Github Action 的 配置文件时遇到个问题，想把 secret 密钥在执行 npm run xxx 的时候传进来，并在nodejs程序中用到这个变量。

方法​

package.json 部分

  "scripts": {
    "action": "node ./src/action.js"
  }

action.js

let username, password
username = process.argv[process.argv.indexOf('--username')+1] // 用户名在 --username 后面
password = process.argv[process.argv.indexOf('--password')+1] // 密码在 --password 后面
console.log(username + ' ' + password) // 输出传入的参数

rollup插件执行的先后顺序优先级

· 阅读需 2 分钟
Hanasaki
Hanasaki
阿巴阿巴阿巴

官方文档写道：

请注意，大多数情况下@rollup/plugin-commonjs应该在其他插件转化你的模块之前进行，这是为了防止其他插件的更改导致对 CommonJS 的检测被破坏。这个规则的一个例外是 Babel 插件，如果你正在使用它，那么把它放在 commonjs 插件之前。

迷惑的问题来了，如果output中写了好几个输出配置，应该在output中的每一个plugins里把commonjs插件执行放在第一个吗，还是写在外面的plugins里写在第一个？