如何从一个组件传递路由参数并在另一个组件中显示

Question

我对 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 是链接中的序列号，这是屏幕上表格数据文本旁边的预期值

这里是声明路由的 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;

Answer 1

所以在你的路由中，参数是:id，这就是你从参数中访问它的方式。

const { id } = useParams();

路由不关心参数来自哪里，它只知道动态部分命名为id。