React复习记录

1、Outlet的作用

<Outlet /> 是一种在 React 路由器中使用的特殊组件，它用于渲染当前路由的子路由。在一些情况下，我们可能只想渲染子路由，而不需要使用上下文传递任何参数。这种情况下，可以直接使用 <Outlet /> 组件来渲染。当我们访问 "/about" 页面时，只有 <Outlet /> 被渲染，而没有其他任何元素。

import React, { Component } from 'react';
import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h2>Home</h2>
      <Link to="/about">About</Link>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
      <Link to="/contact">Contact</Link>
      <Outlet />
    </div>
  );
}

function Contact() {
  return (
    <div>
      <h2>Contact</h2>
    </div>
  );
}

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} >
            <Route path="/contact" element={<Contact />} />
          </Route>
        </Routes>
      </BrowserRouter>
    );
  }
}

export default App;

2、react报错 (requires that you specify `NODE_ENV` or `BABEL_ENV`)处理

在vscode setting.json中找到eslint.nodeEnv配置项 写上”eslint.nodeEnv“ :“development”, 然后重启vscode错误就消失