React 使用 Outlet默认渲染页面

前言：在React版本更新到现在，路由的页面跳转已经非常丰富，当然封装方法也是各种各样。

由于比较懒，所以选择以Outlet 默认渲染页面。但对于数据如何父传子，以及子如何调用父页面困扰了一段时间，以此写此文，防止忘记。

路由配置文件  App.js

import { HashRouter, Routes, Route } from 'react-router-dom';
import Login from './page/login'
import Home from './page/home'
import About from './page/about/about'
import Integrated from './page/integrated/integrated'
// import Sidebar from './page/sidebar'
import Sidebar from './page/sidebar/index.tsx'
import Latent from './page/latent/latent'
import Particulars from './page/particulars/particulars'
import SecurityCheck from './page/securityCheck/securityCheck'
import { AdminStoreContext } from './utils/context/Context';
import Test from './page/test';
function App() {
  {/* 如果需要默认显示页面将不需要填写路径 ，子路由不需要写/斜杠跳转时会带有*/ }
  return (
    <HashRouter>
      <Routes>
        <Route path='/' element={<Login />} ></Route>
        <Route path='/home' element={<Home />} >
          {/* <Route path='' element={<Particulars AdminStoreContext ={AdminStoreContext } />} ></Route> */}
          {/* <Route path='securityCheck' element={<SecurityCheck />} ></Route> */}
        </Route>

        {/* 一级路由about */}
        <Route path='/about' element={<About />} >
          {/* 二级默认路由Integrated */}
          <Route path='' element={<Integrated />} ></Route>
          <Route path='sidebar' element={<Sidebar />} >
            {/* 三级路由*/}
            <Route path='' element={<Latent />} ></Route>
            <Route path='particulars' element={<Particulars />} ></Route>
            <Route path='securityCheck' element={<SecurityCheck />} ></Route>
          </Route>  
          <Route path='test' element={<Test />}></Route>
        </Route>
      </Routes>
    </HashRouter>
  );
}

export default App;

以Page文件夹about.js 为例

import React from 'react';
import { Outlet, useNavigate} from 'react-router-dom';

export default function About() {
    const navigate = useNavigate(); 
    // 需要注意的是 useNavigate() 跳转只能在无状态组件中进行 
    let ddd=['c','n']

    const [count, setCount] = React.useState(ddd); // 数据共享
    // 需要注意的是，它只能传入两组字段，一组为原始数据，一组用于变更数据，用作对比时，每次数据变动
    // 页面随之更新  传入的数据类型由自己决定

    //  navigate('', {}) // 前往默认页
    //  navigate('/home', {}) // 前往其他页
    //  navigate('文件名/子文件', {}) //前往子级
    //  navigate('文件名', {replace: true}) //前往当前路由其他同级页  replace: true 重定向
    return (
        <>
           <h4>About</h4>
             <button onClick={() => {
                navigate('test', { state: ddd });
                       // state 传参不限制传参类型
              }}>点击Test页</button>
           <Outlet context={[count, setCount]} />
        </>
    )
}

<button onClick={() => {navigate('sidebar/securityCheck', { state: ddd }); }}>点击</button> 

<button onClick={() => {navigate('/home')

        // 跳转不同页  '/'+页名

}}>跳转home不同页</button>

 

 Page文件test.js （这里的test是作为about二级页面的内嵌页在使用）  即：

 

import React, { Component } from 'react'
import { useOutletContext } from 'react-router-dom';
const Test = () => {
    const [count, setCount] = useOutletContext(); 
    console.log('count',count)
    //useOutletContext 路由内置方法，监听数据发生变动
    //只能传两个参数，类型由父文件决定
    const increment = () => setCount((c) => c + 1);
    return <button onClick={increment}>{count}</button>;
}
export default Test

注意事项：HashRouter 会使 跳转时传入的参数，刷新时丢失。

好处是：参数不是通过url地址拼接带入的，这使页面看上去较简介。

解决办法：可以在父页面传入需要渲染的数据，而不是参数。react推荐对与业务上无关的组件，使用无状态组件。或者hook 、 临时缓存。