據我所知，“鏈接”已被“路線”取代，我無法找到可靠的答案或解決方案。
當用戶單擊按鈕時，我希望它們被路由到我的應用程式“/trade”中的另一個頁面
這是我到目前為止所擁有的
<button className='btn-success btn btn-lg' onClick={<Route to='/trade' />}>Trade This Stock</button>
uj5u.com熱心網友回復：
您可以通過多種方式做到這一點。
使用 useHistory
import React from "react";
import {useHistory, withRouter } from "react-router-dom";
function NavigationExample() {
const history = useHistory();
console.log(history);
return (
<div>
<button onClick={() => history.push("/dashboard")} type="button">
Click
</button>
</div>
);
}
export default withRouter(NavigationExample);
應用程式.js
import React from "react";
import { BrowserRouter as Router } from 'react-router-dom';
import NavigationExample from "./NavigationExample";
export default function App() {
return (
<Router>
<NavigationExample />
</Router>
);
}
Codesandbox 中的實時示例
在上面的示例中，您
useHistory從react-router-dom. 然后從中獲取歷史物件useHistory并最終history.push使用 url呼叫
使用 Link
import React from 'react';
import { Link } from "react-router-dom";
function NavigationExample() {
return (
<>
<Link to={{pathname: '/dashboard'}}>Dashboard</Link>
</>
);
}
export default NavigationExample;
在上面的示例中，您
Link從react-router-dom. 然后你需要to用 url設定
uj5u.com熱心網友回復：
以編程方式導航 - 反應教程
https://reactrouter.com/docs/en/v6/getting-started/tutorial#navigating-programmatically
import { useParams, useNavigate } from "react-router-dom";
import { getInvoice, deleteInvoice } from "../data";
export default function Invoice() {
let navigate = useNavigate();
let params = useParams();
let invoice = getInvoice(parseInt(params.invoiceId, 10));
return (
<main style={{ padding: "1rem" }}>
<h2>Total Due: {invoice.amount}</h2>
<p>
{invoice.name}: {invoice.number}
</p>
<p>Due Date: {invoice.due}</p>
<p>
<button
onClick={() => {
deleteInvoice(invoice.number);
navigate("/invoices");
}}
>
Delete
</button>
</p>
</main>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360332.html