React 导航通常使用 React Router 库来实现。React Router 提供了一种声明式的方式来定义路由,并且可以方便地在组件之间传递参数。这些参数可以是查询字符串(query string)、路径参数(path parameters)或状态(state)。
?key=value
的形式来传递参数。/users/:id
。// 定义路由
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<div>
<Link to="/user/123">Go to User 123</Link>
<Route path="/user/:id" component={User} />
</div>
</Router>
);
}
// 获取路径参数
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <h1>User ID: {id}</h1>;
}
// 通过编程方式进行页面跳转并传递状态
import { useHistory } from 'react-router-dom';
function Home() {
const history = useHistory();
const handleClick = () => {
history.push('/about', { message: 'Hello from Home!' });
};
return (
<div>
<button onClick={handleClick}>Go to About</button>
</div>
);
}
// 获取状态
import { useLocation } from 'react-router-dom';
function About() {
const location = useLocation();
const { message } = location.state || {};
return <h1>About Page - {message}</h1>;
}
原因:可能是路由定义不正确,或者组件未正确导入和使用。
解决方法:
原因:可能是页面跳转时未正确传递状态,或者目标组件未正确获取状态。
解决方法:
希望这些信息对你有所帮助!如果有更多问题,请随时提问。
领取专属 10元无门槛券
手把手带您无忧上云