将属性值从登录组件向下传递到路由组件

import { Route } from 'react-router-dom';

// 登录组件
const LoginComponent = () => {
  const username = 'John Doe'; // 属性值

  return (
    // 渲染路由组件，并将属性值传递给路由组件
    <Route
      path="/dashboard"
      render={(props) => <DashboardComponent {...props} username={username} />}
    />
  );
};

// 路由组件
const DashboardComponent = (props) => {
  const { username } = props; // 接收属性值

  return <div>Welcome, {username}!</div>;
};

import React, { createContext, useContext } from 'react';

// 创建Context
const UserContext = createContext();

// 登录组件
const LoginComponent = () => {
  const username = 'John Doe'; // 属性值

  return (
    // 将属性值存储在Context中
    <UserContext.Provider value={username}>
      <DashboardComponent />
    </UserContext.Provider>
  );
};

// 路由组件
const DashboardComponent = () => {
  const username = useContext(UserContext); // 获取属性值

  return <div>Welcome, {username}!</div>;
};

import { Route } from 'react-router-dom';

// 登录组件
const LoginComponent = () => {
  const username = 'John Doe'; // 属性值

  return (
    // 将属性值作为URL参数传递给路由组件
    <Route path="/dashboard/:username" component={DashboardComponent} />
  );
};

// 路由组件
const DashboardComponent = (props) => {
  const { username } = props.match.params; // 获取属性值

  return <div>Welcome, {username}!</div>;
};