在React中如何通过state或react-router实现点击按钮渲染对应表单组件？

问题原因 #

你使用的是React Router v6版本，当前代码的Route组件属性写法与v6版本规范不兼容，是点击跳转后组件不渲染的核心原因。

方案1：使用React Router实现（支持URL路由跳转） #

前置要求 #

确保你的App组件已经被包裹在路由根组件BrowserRouter中，一般在入口文件index.js中配置：

// index.js 示例
import { BrowserRouter } from 'react-router-dom'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

修正后App组件代码 #

React Router v6中废弃了component和exact属性，改用element属性传入组件实例，路径默认采用精确匹配规则：

import { Routes, Route, useNavigate } from 'react-router-dom'
import Header from './Header'
import Main from './Main'
import Main2 from './Main2'

function App() {
  const navigate = useNavigate()
  return (
    <div className="app">
      <Header />
      <button onClick={()=> navigate("/main")}>打开第一个表单</button>
      <button onClick={()=> navigate("/main2")}>打开第二个表单</button>
      <Routes>
        <Route path="/main" element={<Main />}/>
        <Route path="/main2" element={<Main2 />}/>
      </Routes>
    </div>
  );
}

export default App;

方案2：使用本地state实现（无需修改URL） #

如果不需要支持通过URL直接访问对应表单、不需要保留浏览器前进后退记录，可以直接用useState做组件切换，无需引入路由：

import { useState } from 'react'
import Header from './Header'
import Main from './Main'
import Main2 from './Main2'

function App() {
  // 可选值：null/ 'main' / 'main2'，null表示初始不显示任何表单
  const [activeForm, setActiveForm] = useState(null)

  return (
    <div className="app">
      <Header />
      <button onClick={()=> setActiveForm('main')}>打开第一个表单</button>
      <button onClick={()=> setActiveForm('main2')}>打开第二个表单</button>
      {activeForm === 'main' && <Main />}
      {activeForm === 'main2' && <Main2 />}
    </div>
  );
}

export default App;

两种方案适用场景 #

• 选React Router方案：需要支持直接通过URL访问对应表单、需要保留浏览器前进后退操作记录、需要在地址栏显示当前表单对应路径
• 选state方案：仅需要页面内切换展示、不需要修改URL、不需要支持外部直接跳转进入对应表单

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