How to pass route parameters from one Component and display in the other

November 28, 2021

I’m pretty new to the concept of React Router and am currently struggling to understand how I can pass data from one component and the display or use it for performing other functions on the other component. I have used the useHistory hook and the useParams hook.

This is where I have used the useHistory hook

const Table = (props) => {
    const data = [];
    const history = useHistory();

    const [tableData, setTableData] = useState(data)

    useEffect(() => {
        setTableData(props.buttonValue)
    }, [props.buttonValue]);

    const tableDataPage = (value) => {
        history.push(`/tableData/${value}`)
    };

    return (
        <div className="tableDataList">
            {!tableData ? "" : <table className="serviceRequestList">

                <tbody>
                    <tr>
                        <th style={{ width: "5%" }}>Serial Number<span><ImFilter size={"12px"} /></span></th>
                        <th>Name<span><ImFilter size={"12px"} /></span></th>
                        <th>Date<span><ImFilter size={"12px"} /></span></th>
                        <th>Issue<span><ImFilter size={"12px"} /></span></th>
                        <th>Status<span><ImFilter size={"12px"} /></span></th>
                    </tr>
                    {tableData.map((value, key) => (
                        <tr key={key} onClick={() => tableDataPage(value.serial_number)}>
                            <td>{value.serial_number}</td>
                            <td>{value.name}</td>
                            <td>{value.date}</td>
                            <td>{value.issue}</td>
                            <td>{value.status}</td>
                        </tr>
                    ))}
                </tbody>
            </table>}
        </div>
    );
}

export default Table;

The component that we get directed to is the one below. However, although the route link has the serial_number showing in it, it doesn’t get displayed in either the div or the console.log. The console log shows an undefined value.

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

const TableData = () => {
    const { serial_number } = useParams();
    console.log(serial_number);

    return (
        <div>Table Data - {serial_number}</div>
    );
}

export default TableData;

0073 is the serial number in the link and that is what’s expected on the screen next to the Table Data text

This here is the App.js file where the routes are declared.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          <Route exact path="/" component={MainScreen}></Route>
          <Route path="/addData" component={AddDataScreen}></Route>
          // This is the route in question
          <Route path="/tableData/:id" component={TableData}></Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;