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错误就消失