react-router重定向

### React Router 实现重定向的方法 React Router 提供了两种主要的方式来实现页面之间的重定向：**标签式重定向**和**编程式重定向**。 #### 标签式重定向 在 `react-router-dom` 中，可以通过 `<Redirect>` 组件来实现标签式的重定向功能。此方法通常用于声明性的场景，在路由匹配时自动触发重定向逻辑[^2]。 以下是使用 `<Redirect>` 进行重定向的一个简单示例： ```javascript import React from 'react'; import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'; function App() { return ( <Router> <Route path="/old-path"> {/* 当访问 /old-path 时会重定向到 /new-path */} <Redirect to="/new-path" /> </Route> <Route path="/new-path"> <h1>这是新路径的内容</h1> </Route> </Router> ); } export default App; ``` 上述代码展示了当用户尝试访问 `/old-path` 路径时会被立即重定向至 `/new-path` 页面。 --- #### 编程式重定向 对于更复杂的业务需求，比如登录状态校验后的动态跳转，则可以采用编程方式完成重定向操作。这通常是通过调用 `history.push()` 或者利用 `useNavigate` Hook 来达成目标[^4]。 下面是一个基于函数组件并结合 Hooks 的编程式重定向例子： ```javascript import React from 'react'; import { useNavigate } from 'react-router-dom'; const ProtectedPage = ({ isLoggedIn }) => { const navigate = useNavigate(); React.useEffect(() => { if (!isLoggedIn) { // 如果未登录则重定向回登录页 navigate('/login', { replace: true }); } }, [isLoggedIn, navigate]); return <div>这是一个受保护的页面。</div>; }; export default ProtectedPage; ``` 在这个案例里，如果用户的登录状态 (`isLoggedIn`) 不满足条件，那么就会被强制引导回到登录界面 `/login`。 --- #### 使用 `BrowserRouter` 包裹应用 无论采取哪种形式的重定向方案，都需要确保整个项目已经被正确设置好基础环境——即由 `<BrowserRouter>` 将所有的路由定义包裹起来[^3]。只有这样，React Router 才能正常工作并处理各种类型的导航请求。 ```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode> ); ``` 以上片段明确了如何初始化一个支持路由的应用程序结构。 ---