在React中,可以使用React Router來進行路由跳轉和傳參。以下是使用React Router進行路由跳轉和傳參的方法:
npm install react-router-dom
BrowserRouter
或HashRouter
組件來包裹整個應用,并使用Route
組件來定義路由。import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
return (
<Router>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Router>
);
}
Link
組件或history.push
方法來進行路由跳轉。Link
組件:import { Link } from 'react-router-dom';
function Navigation() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}
history.push
方法:import { useHistory } from 'react-router-dom';
function Home() {
const history = useHistory();
const handleClick = () => {
history.push('/about');
};
return (
<div>
<button onClick={handleClick}>Go to About</button>
</div>
);
}
Route
組件的render
屬性來傳遞參數。<Route path="/user/:id" component={User} />
在User
組件中,可以通過props.match.params.id
來獲取傳遞的參數。
render
屬性:<Route path="/user" render={(props) => <User {...props} userId={123} />} />
在User
組件中,可以通過props.userId
來獲取傳遞的參數。
這些是使用React Router進行路由跳轉和傳參的基本方法。根據具體的需求,還可以使用更高級的功能,如嵌套路由、路由守衛等。