ReactJS多按钮显隐与react-router多视图切换技术咨询

嘿，我来帮你一步步解决这个问题，分按钮显隐和多视图路由两部分来讲，都是React里很常用的方案～

按钮显隐核心是条件渲染，根据你的需求，主要有两种场景的实现方式：

1. 基于查询状态控制显隐 #

最直接的方式是用组件内部状态来控制，比如只有当用户完成查询、拿到结果后，才展示视图切换按钮：

import { useState } from 'react';

function QueryPage() {
  const [userInput, setUserInput] = useState('');
  const [queryResult, setQueryResult] = useState(null);
  // 控制按钮组显隐的状态
  const [showViewButtons, setShowViewButtons] = useState(false);

  const handleRunQuery = () => {
    // 模拟执行查询的逻辑
    const mockResult = { data: `关于${userInput}的查询结果` };
    setQueryResult(mockResult);
    // 查询完成后显示视图切换按钮
    setShowViewButtons(true);
  };

  return (
    <div className="query-container">
      <input
        type="text"
        value={userInput}
        onChange={(e) => setUserInput(e.target.value)}
        placeholder="输入查询内容"
      />
      <button onClick={handleRunQuery}>执行查询</button>

      {/* 条件渲染按钮组：只有showViewButtons为true时才显示 */}
      {showViewButtons && (
        <div className="view-switch-buttons">
          <button>表格视图</button>
          <button>图表视图</button>
          <button>列表视图</button>
        </div>
      )}

      {/* 默认视图展示查询结果 */}
      {queryResult && <div className="default-view">{queryResult.data}</div>}
    </div>
  );
}

这种方式逻辑清晰，完全由业务状态（是否完成查询）来驱动按钮显示，适合大部分场景。

2. 基于路由匹配控制显隐 #

如果你的按钮需要在特定路由下才显示（比如只有在结果页面才展示），可以用react-router-dom的useLocation钩子来判断：

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

function ViewSwitchButtons() {
  const location = useLocation();
  // 只有在结果类路由下才显示按钮
  const shouldShow = location.pathname.startsWith('/view-');

  return shouldShow ? (
    <div className="view-switch-buttons">
      <button>表格视图</button>
      <button>图表视图</button>
    </div>
  ) : null;
}

把这个组件放在全局布局里，就能自动根据当前路由控制显隐了。

接下来是多视图的核心：用路由切换不同视图页面，同时保留用户的查询输入/结果。

1. 基础路由配置 #

首先确保你已经安装了react-router-dom，然后在根组件里配置路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import QueryPage from './QueryPage';
import TableView from './TableView';
import ChartView from './ChartView';
import ListView from './ListView';

function App() {
  return (
    <Router>
      <Routes>
        {/* 查询入口页面 */}
        <Route path="/" element={<QueryPage />} />
        {/* 各个视图页面 */}
        <Route path="/table-view" element={<TableView />} />
        <Route path="/chart-view" element={<ChartView />} />
        <Route path="/list-view" element={<ListView />} />
      </Routes>
    </Router>
  );
}

2. 按钮跳转并传递查询参数 #

修改之前的按钮组，用Link组件或者useNavigate钩子实现跳转，同时把用户的查询输入通过URL参数传递：

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

// 在QueryPage的按钮组里替换为Link
{showViewButtons && (
  <div className="view-switch-buttons">
    <Link to={`/table-view?input=${encodeURIComponent(userInput)}`}>表格视图</Link>
    <Link to={`/chart-view?input=${encodeURIComponent(userInput)}`}>图表视图</Link>
    <Link to={`/list-view?input=${encodeURIComponent(userInput)}`}>列表视图</Link>
  </div>
)}

如果需要在跳转前做额外逻辑（比如验证），可以用useNavigate编程式导航：

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

const navigate = useNavigate();
const goToChartView = () => {
  // 这里可以加跳转前的逻辑
  navigate(`/chart-view?input=${encodeURIComponent(userInput)}`);
};

// 按钮改为：
<button onClick={goToChartView}>图表视图</button>

3. 在视图组件中获取参数并展示结果 #

在每个视图组件里，用useSearchParams钩子获取URL参数，然后执行查询（或者直接用之前存储的结果）：

import { useSearchParams } from 'react-router-dom';
import { useEffect, useState } from 'react';

function TableView() {
  const [searchParams] = useSearchParams();
  const [queryResult, setQueryResult] = useState(null);
  // 获取传递的查询输入
  const userInput = searchParams.get('input');

  useEffect(() => {
    if (userInput) {
      // 这里可以重新执行查询，或者从全局状态取之前的结果
      const mockResult = { data: `表格视图展示：${userInput}的查询结果` };
      setQueryResult(mockResult);
    }
  }, [userInput]);

  return (
    <div className="view-container">
      <h2>表格视图</h2>
      {queryResult ? (
        <table>
          <thead>
            <tr><th>查询内容</th><th>结果</th></tr>
          </thead>
          <tbody>
            <tr><td>{userInput}</td><td>{queryResult.data}</td></tr>
          </tbody>
        </table>
      ) : (
        <div>加载中...</div>
      )}
      {/* 返回查询页按钮 */}
      <button onClick={() => window.history.back()}>返回查询页</button>
    </div>
  );
}

4. 优化：用全局状态共享查询结果 #

如果查询结果比较大，或者不想重复执行查询，可以用React Context或者Redux来存储查询结果，避免通过URL传递大量数据。举个Context的例子：

// QueryContext.js
import { createContext, useContext, useState } from 'react';

const QueryContext = createContext();

export function QueryProvider({ children }) {
  const [queryData, setQueryData] = useState({ input: '', result: null });
  return (
    <QueryContext.Provider value={{ queryData, setQueryData }}>
      {children}
    </QueryContext.Provider>
  );
}

export function useQuery() {
  return useContext(QueryContext);
}

然后在根组件里包裹Provider：

function App() {
  return (
    <QueryProvider>
      <Router>
        {/* 路由配置不变 */}
      </Router>
    </QueryProvider>
  );
}

之后在QueryPage里存储结果：

const { setQueryData } = useQuery();
const handleRunQuery = () => {
  const mockResult = { data: `关于${userInput}的查询结果` };
  setQueryData({ input: userInput, result: mockResult });
  setShowViewButtons(true);
};

在视图组件里直接取结果：

const { queryData } = useQuery();
// 直接用queryData.result即可，无需重新查询

内容的提问来源于stack exchange，提问作者Richard