How to render the text used on one page on another page in ReactJS?

Question

Basically, I just want to display the name of the User entered inside the textbox on another page. I am a beginner in ReactJS so bare with me.

I am entering the name in a textbox in Enter.js and upon clicking the button it is redirecting me to Preview.js where I want the name to be displayed!!!

Here is my code of 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;

Code 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>
    </>
  )
}

Code of Preview.js

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
}

Thankyou for your help in advance!!!

Answer 1

The best way to achieve this is to pass query parameters on redirection like this:

const preview = () => { navigate(/preview?q=${text}); }

And then on the preview page you can get the value of query param and display it on the page.

import { useSearchParams } from "react-router-dom"

let [searchParams, setSearchParams] = useSearchParams() const text= searchParams.get("q")

This is how you can get the params

Answer 2

Best option is to use React Context to save your text on global state , then read that from your Preview Component, or any component you want.