react route如何传参数
路由参数传递
在React Router中，可以通过URL路径传递参数。使用动态路由匹配，参数会被自动解析并可通过useParams钩子获取。
定义带参数的路由：
<Route path="/user/:id" element={<User />} />在组件中获取参数：
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}查询参数传递
通过URL查询字符串传递参数，使用useSearchParams钩子获取和修改查询参数。
在组件中使用查询参数：
import { useSearchParams } from 'react-router-dom';
function Search() {
const [searchParams, setSearchParams] = useSearchParams();
const query = searchParams.get('q');
return (
<div>
Search Query: {query}
<button onClick={() => setSearchParams({ q: 'new' })}>
Update
</button>
</div>
);
}状态参数传递
通过navigate函数的state选项传递参数，这些参数不会显示在URL中，但可以通过useLocation钩子获取。
传递状态参数：
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
return (
<button
onClick={() => navigate('/profile', { state: { fromHome: true } })}
>
Go to Profile
</button>
);
}接收状态参数：
import { useLocation } from 'react-router-dom';
function Profile() {
const location = useLocation();
const { fromHome } = location.state || {};
return <div>{fromHome ? 'From Home' : 'Not from Home'}</div>;
}编程式导航传递参数
通过useNavigate钩子进行编程式导航时，可以传递参数。
传递路径参数：
const navigate = useNavigate();
navigate('/user/123');传递查询参数：
navigate('/search?q=react');传递状态参数：
navigate('/profile', { state: { user: 'admin' } });获取路由参数
在类组件中获取路由参数，可以使用withRouter高阶组件或通过props获取。
使用withRouter：
import { withRouter } from 'react-router-dom';
class User extends React.Component {
render() {
const { id } = this.props.match.params;
return <div>User ID: {id}</div>;
}
}
export default withRouter(User);在函数组件中，推荐使用useParams、useSearchParams和useLocation钩子来获取各种类型的参数。
