ReactJS中如何将一个页面输入的文本渲染到另一个页面

问题原因 #

你当前的代码存在两个核心问题，导致功能无法正常运行：

• 路由注册位置错误：/preview 路由被错误写在Enter组件内部，根组件App.js仅注册了首页路径，跳转至预览页时无法匹配到对应路由，会出现页面空白。
• 传值逻辑错误：输入的姓名存在Enter组件的本地state中，路由跳转后Enter组件会被卸载，对应state会被直接销毁，且跳转时没有主动携带输入值，预览页拿不到数据。

修复步骤 #

直接使用react-router-dom自带的路由传参能力即可实现需求，不需要额外引入第三方状态库，适合初学者使用。

1. 修改App.js
   根组件需要包裹路由容器BrowserRouter，同时把预览页的路由注册到全局路由表中：

import './App.css';
import React from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route
} from 'react-router-dom';
import Enter from './components/Enter';
import Preview from './components/Preview';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Enter/>}/>
        <Route path="/preview" element={<Preview/>}/>
      </Routes>
    </Router>
  );
}

export default App;

2. 修改Enter.js
   删除组件内多余的路由配置，点击提交跳转时把输入的姓名通过路由state携带到预览页：

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

export default function Enter() {
  const navigate = useNavigate();
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
  }

  const handleSubmit = () => {
    navigate("/preview", {
      state: { userName: text }
    });
  }

  return (
    <div className="container my-3">
      <label htmlFor="exampleFormControlInput1" className="form-label">Name:</label>
      <input 
        className="form-control" 
        placeholder="Enter your full Name" 
        onChange={handleChange} 
        value={text}
      />
      <button className="btn btn-primary my-4" onClick={handleSubmit}>Submit</button>
    </div>
  )
}

3. 修改Preview.js
   通过useLocation钩子读取路由携带的参数，渲染到页面即可：

import React from 'react';
import PropTypes from 'prop-types';
import { useLocation } from 'react-router-dom';

export default function Preview() {
  const location = useLocation();
  // 可选链做兼容，没传值的时候默认显示空字符串
  const userName = location.state?.userName || '';

  return (
    <div className="container my-3">
        <h3>Name:{userName}</h3>
    </div>
  )
}

Preview.propTypes = {
    userName: PropTypes.string
}

补充说明 #

如果需要刷新预览页后输入的姓名不丢失，可以把传值方式换成URL search参数，或者将姓名临时存在localStorage中，上述代码已经可以满足基础的跳转展示需求。

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