如何在ReactJS中的另一页上的一个页面上渲染文本？

Question

基本上，我只想显示另一个页面上文本框中输入的用户的名称。我是Reactjs的初学者，与我很裸露。

我正在在enter.js中的文本框中输入名称，然后单击按钮后，它将我重定向到preview.js，我希望在其中显示名称！！！

这是我的app.js代码

//import logo from './logo.svg';
import './App.css';
import React from 'react';
//import { useState } from 'react';
//import { useNavigate } from "react-router-dom";
//import Preview from './components/Preview';

import {
  //BrowserRouter as Router,
  Routes,
  Route
} from 'react-router-dom';
import Enter from './components/Enter';
function App() {

  //const [text,setText] = useState();

  
 
  return (
    <Routes>
      <Route path="/" element={<Enter/>}/>
      
    </Routes>
    
  );
}

export default App;

enter.js of enter.js

import React from 'react';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
//import PropTypes from 'prop-types'
import {
    //BrowserRouter as Router,
    Routes,
    Route
    //Link
  } from 'react-router-dom';
import Preview from './Preview';

export default function Enter() {
    const navigate = useNavigate();

  const preview = () => {
    navigate("/preview");
  }

  const [text,setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
  }
  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={preview}>Submit</button>
    
    </div>
    <Routes>
    <Route path="/preview" element={<Preview text1={text}/>}/>
    </Routes>
    </>
  )
}

预览码

import React from 'react';
import PropTypes from 'prop-types';
export default function Preview(props) {
  return (
    <div className="container my-3">
        <h3>Name:{props.text1}</h3>
    </div>
  )
}

Preview.propTypes = {
    text1: PropTypes.string
}

。

Answer 1

实现此目的的最佳方法是通过这样的重定向传递查询参数：

const preview =（）=＆gt; {
导航（/preview？q = $ {text}）;
}

然后在预览页面上，您可以获取查询参数的值并在页面上显示。

import {useearchParams}来自“ react-router-dom”，

让[searchParams，setSearchParams] = useechapparams（）
const text = searchparams.get（“ q”）

这就是您可以获取参数的方式

Answer 2

最佳选择是使用 react上下文将文本保存在全球状态上，然后从您的预览组件或您想要的任何组件。