React Router 提供了多种方式来传递路由参数：
- URL 路径参数：通过动态路由和
useParams获取。 - 查询参数：通过
useLocation获取 URL 查询字符串。 - 路由状态传递：通过
state属性在导航时传递数据，不在 URL 中显示，使用useLocation获取。 - React Router v6
Navigate和useNavigate：用于程序性导航并传递状态。
路由传参。React Router 提供了多种方式来传递和获取路由参数。以下是几种常见的方式：
1. URL 路径参数 (Path Parameters)
当你在 URL 路径中使用动态部分时，可以通过 React Router 的 useParams hook 来访问这些参数。
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route path="/user/:id" component={User} /> //路由配置文件中的写法同理
</Switch>
</Router>
);
}
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams(); // 获取 URL 中的动态参数 id
return <div>User ID: {id}</div>;
}
2. 查询参数 (Query Parameters)
可以在 URL 中通过查询字符串传递参数，使用 useLocation hook 来访问查询参数。
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route path="/search?query=react&sort=asc" component={SearchResults} />
</Switch>
</Router>
);
}
import { useLocation } from 'react-router-dom';
function SearchResults() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const query = queryParams.get('query'); // 获取 query 参数
const sort = queryParams.get('sort'); // 获取 sort 参数
return (
<div>
<p>Query: {query}</p>
<p>Sort: {sort}</p>
</div>
);
}
3. 传递状态 (State via Navigation)
React Router 提供了通过 history.push 或 Link 传递状态的方式，这种方式的参数不会显示在 URL 中。
import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<Link
to={{
pathname: "/about",
state: { fromHome: true }
}}
>
Go to About
</Link>
</div>
);
}
import { useLocation } from 'react-router-dom';
function About() {
const location = useLocation();
const fromHome = location.state?.fromHome;
return <div>{fromHome ? 'Visited from Home' : 'Not from Home'}</div>;
}
4. 传递参数使用 Navigate (React Router v6)
在 React Router v6 中，Navigate 组件用于程序性导航，并且可以携带状态
import { Navigate } from 'react-router-dom';
function Home() {
return <Navigate to="/about" state={{ fromHome: true }} />;
}
import { useLocation } from 'react-router-dom';
function About() {
const location = useLocation();
const fromHome = location.state?.fromHome;
return <div>{fromHome ? 'Visited from Home' : 'Not from Home'}</div>;
}
5. 传递参数通过 useNavigate（React Router v6）
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
const goToAbout = () => {
navigate('/about', { state: { fromHome: true } });
};
return <button onClick={goToAbout}>Go to About</button>;
}
