如何使用React Router--01
一、React Router 基礎
1.1 安裝 React Router
要在項目中使用 React Router，首先需要安裝：
npm install react-router-dom
安裝完成后，你可以在應用中使用 BrowserRouter、Route、Switch 等組件來實現路由功能。
1.2 基本路由配置
最簡單的路由配置通常包含以下幾個部分：
BrowserRouter：用于包裹整個應用，提供路由功能。Route：定義路徑和對應的組件，當路徑匹配時渲染對應組件。Switch：確保一次只渲染一個路由。
代碼如下：
import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } function App() { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> </Switch> </Router> ); } export default App;
exact：確保路徑精確匹配，例如，只有當路徑完全是'/'時才會渲染Home組件。
1.3 鏈接與導航
使用 Link 組件創建導航鏈接，它會渲染一個普通的 <a> 標簽，但點擊時不會觸發頁面刷新，而是通過 React Router 實現路由跳轉。
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
);
}
二、React Router 高級功能
2.1 動態路由
在實際開發中，經常需要基于動態參數來渲染組件，比如用戶詳情頁。React Router 提供了動態路由功能，允許通過 URL 參數傳遞信息。
function User({ match }) { return <h2>User ID: {match.params.id}</h2>; } function App() { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/user/:id" component={User} /> </Switch> </Router> ); }
在上述代碼中，:id 是一個動態參數，可以通過 match.params.id 訪問它。
2.2 嵌套路由
嵌套路由允許你在一個組件內部定義子路由，從而實現模塊化路由配置。
function Dashboard({ match }) { return ( <div> <h2>Dashboard</h2> <ul> <li> <Link to={`${match.url}/profile`}>Profile</Link> </li> <li> <Link to={`${match.url}/settings`}>Settings</Link> </li> </ul> <Route path={`${match.path}/profile`} component={Profile} /> <Route path={`${match.path}/settings`} component={Settings} /> </div> ); }
在這個例子中，Dashboard 組件內部的 Profile 和 Settings 都是子路由。
2.3 路由守衛
路由守衛用于控制路由的訪問權限，例如，只有登錄用戶才能訪問某些頁面。React Router 提供了 Redirect 組件來實現這一功能。
function PrivateRoute({ component: Component, ...rest }) { const isAuthenticated = fakeAuth.isAuthenticated; // 示例中的認證邏輯 return ( <Route {...rest} render={props => isAuthenticated ? ( <Component {...props} /> ) : ( <Redirect to="/login" /> ) } /> ); } function App() { return ( <Router> <Switch> <Route path="/login" component={Login} /> <PrivateRoute path="/dashboard" component={Dashboard} /> </Switch> </Router> ); }
在這里，PrivateRoute 組件封裝了訪問權限的檢查邏輯，如果用戶未登錄，將重定向到登錄頁面。
2.4 使用 useHistory 和 useLocation Hooks
React Router 提供了 useHistory 和 useLocation 兩個 Hooks，用于在函數組件中訪問和控制路由歷史記錄和當前位置。
import { useHistory, useLocation } from 'react-router-dom';
function SomeComponent() {
let history = useHistory();
let location = useLocation();
function goBack() {
history.goBack(); // 返回上一頁
}
return (
<div>
<p>Current location: {location.pathname}</p>
<button onClick={goBack}>Go Back</button>
</div>
);
}
useHistory：可以用來編程式導航（例如，history.push('/somepath')）。useLocation：可以訪問當前的URL信息。
路由優化
4.1 懶加載路由
當應用變得復雜時，加載所有的組件可能會影響頁面的加載速度。React 提供了 React.lazy 和 Suspense 進行組件的懶加載，可以與 React Router 結合，實現按需加載路由組件。
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Suspense>
</Router>
);
}
export default App;
React.lazy：將組件動態加載，只有在需要時才會加載對應的組件。Suspense：用于在組件加載過程中顯示一個備用內容（如加載動畫）。
4.2 路由配置文件化
對于大型應用，路由配置可能會非常復雜，將路由配置文件化是一個良好的實踐，能夠提高路由的可維護性。
// routes.js import Home from './Home'; import About from './About'; const routes = [ { path: '/', exact: true, component: Home, }, { path: '/about', component: About, }, ]; export default routes; // App.js import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import routes from './routes'; function App() { return ( <Router> <Switch> {routes.map((route, index) => ( <Route key={index} path={route.path} exact={route.exact} component={route.component} /> ))} </Switch> </Router> ); } export default App;
這種做法將所有路由集中在一個配置文件中，便于管理和擴展，特別是在需要動態生成路由的情況下。
4.3 處理 404 頁面
在單頁應用中，處理未匹配的路徑非常重要，以確保用戶不會訪問無效的頁面。可以通過添加一個匹配所有路徑的 Route 來實現 404 頁面。
function NotFound() { return <h2>404 - Page Not Found</h2>; } function App() { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route component={NotFound} /> </Switch> </Router> ); } export default App;
在上面的代碼中，如果沒有匹配到其他路徑，將會渲染 NotFound 組件。
4.4 路由的權限管理
對于需要權限控制的應用，可以在 PrivateRoute 組件中添加更多的邏輯，如角色檢查、權限驗證等。
function PrivateRoute({ component: Component, roles, ...rest }) { const isAuthenticated = fakeAuth.isAuthenticated; const userRole = fakeAuth.userRole; return ( <Route {...rest} render={(props) => isAuthenticated && roles.includes(userRole) ? ( <Component {...props} /> ) : ( <Redirect to="/unauthorized" /> ) } /> ); }
在這種情況下，可以基于用戶角色或權限來決定是否允許訪問某個路由。
4.5 路由過渡動畫
為了提高用戶體驗，可以為路由切換添加過渡動畫。可以借助 react-transition-group 或 framer-motion 等庫來實現。
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Route
render={({ location }) => (
<TransitionGroup>
<CSSTransition
key={location.key}
classNames="fade"
timeout={300}
>
<Switch location={location}>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</CSSTransition>
</TransitionGroup>
)}
/>
</Router>
);
}
export default App;
通過 CSSTransition 和 TransitionGroup 可以為路由的進入和離開添加自定義動畫。
浙公網安備 33010602011771號