如何從一個組件傳遞路由引數并在另一個組件中顯示-有解無憂

我對 React Router 的概念還很陌生，目前正在努力理解如何從一個組件和顯示幕傳遞資料或使用它在另一個組件上執行其他功能。我用過useHistory鉤子和useParams鉤子。

這是我使用useHistory鉤子的地方

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;

我們被定向到的組件是下面的組件。然而，盡管路徑路段中有顯示SERIAL_NUMBER，它不會顯示在任一div或console.log。控制臺日志顯示未定義的值。

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 是鏈接中的序列號，這就是螢屏上 Table Data 文本旁邊的預期內容

這是宣告路由的 App.js 檔案。

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;

uj5u.com熱心網友回復：

因此，在您的路線中，引數是:id，這就是您從引數中訪問它的方式。

const { id } = useParams();

路由并不關心引數來自哪里，它只知道動態部分是 named id。

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/368343.html

標籤：反应反应路由器

上一篇：滑動擴展影片旁邊的專案

下一篇：移除MaterialUIOutlinedTextField中的內邊距邊框