学习笔记──React──路由

基本概念

1. Router：包裹整个应用的路由器组件，常见的是 BrowserRouter 和 HashRouter。
2. Route：定义应用中的各个路由，表示 URL 与组件的映射关系。
3. Link：用于创建可点击的导航链接。
4. Switch：确保一次只渲染一个路由匹配的组件。

安装 react-router-dom

首先，安装 react-router-dom：

npm install react-router-dom

使用 BrowserRouter

BrowserRouter 使用 HTML5 的 history API 来保持 UI 与 URL 同步。适用于现代浏览器。

创建一个简单的路由示例

1. 设置基本的路由结构：

   // App.js
   import React from 'react';
   import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
   import Home from './Home';
   import About from './About';
   import Contact from './Contact';
   
   function App() {
     return (
       <Router>
         <div>
           <nav>
             <ul>
               <li><Link to="/">Home</Link></li>
               <li><Link to="/about">About</Link></li>
               <li><Link to="/contact">Contact</Link></li>
             </ul>
           </nav>
           <Switch>
             <Route exact path="/" component={Home} />
             <Route path="/about" component={About} />
             <Route path="/contact" component={Contact} />
           </Switch>
         </div>
       </Router>
     );
   }
   
   export default App;

2. 创建页面组件：

   // Home.js
   import React from 'react';
   
   function Home() {
     return <h2>Home</h2>;
   }
   
   export default Home;

   // About.js
   import React from 'react';
   
   function About() {
     return <h2>About</h2>;
   }
   
   export default About;

   // Contact.js
   import React from 'react';
   
   function Contact() {
     return <h2>Contact</h2>;
   }
   
   export default Contact;

动态路由

动态路由允许你匹配带参数的路径。例如，可以通过动态路由来显示用户的个人页面。

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import User from './User';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
            <li><Link to="/user/john">User John</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route path="/user/:username" component={User} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

// User.js
import React from 'react';
import { useParams } from 'react-router-dom';

function User() {
  let { username } = useParams();
  return <h2>User: {username}</h2>;
}

export default User;

嵌套路由

你可以在组件中定义子路由。例如，一个用户的详情页中可能有多个子页面。

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import User from './User';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
            <li><Link to="/user/john">User John</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route path="/user/:username" component={User} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

// User.js
import React from 'react';
import { useParams, Link, Route, Switch, useRouteMatch } from 'react-router-dom';

function User() {
  let { username } = useParams();
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>User: {username}</h2>
      <ul>
        <li><Link to={`${url}/profile`}>Profile</Link></li>
        <li><Link to={`${url}/settings`}>Settings</Link></li>
      </ul>
      <Switch>
        <Route exact path={path}>
          <h3>Please select an option.</h3>
        </Route>
        <Route path={`${path}/profile`}>
          <h3>Profile</h3>
        </Route>
        <Route path={`${path}/settings`}>
          <h3>Settings</h3>
        </Route>
      </Switch>
    </div>
  );
}

export default User;

重定向

使用 Redirect 组件可以在特定路径下重定向到另一个路径。

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link, Redirect } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import User from './User';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
            <li><Link to="/user/john">User John</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route path="/user/:username" component={User} />
          <Redirect from="/old-path" to="/new-path" />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

*** 本文仅是学习中的记录，有错误请指正。 ***