React学习笔记——路由详解，快速入门react路由机制！

2024-01-07 15:06:30

## 导语如今，单页面应用（SPA）已成为现代Web开发的趋势。单页面应用通过在不刷新整个页面前提下更改页面内容，以实现更快的响应和更好的用户体验。而React作为前端开发中最流行的框架之一，自然也为构建单页面应用提供了完善的解决方案：React Router。

React 路由的魅力

React Router作为React官方推荐的路由库，其优势不可小觑。首先，React Router与React完美契合，遵循React的组件化思想，使得路由管理更加直观和易于理解。其次，React Router功能强大，提供了丰富的API，可以轻松实现各种复杂的路由需求，满足各种场景的应用。最后，React Router拥有庞大的社区和完善的文档，使得学习和使用更加便捷。

React 路由入门

1. 安装 React Router

在使用React Router之前，我们需要先将其安装到项目中。使用npm或yarn安装React Router即可：

npm install react-router-dom

2. 创建路由组件

安装React Router后，我们就可以开始创建路由组件了。一个简单的路由组件通常由两部分组成：路径和组件。路径指定了路由的匹配规则，组件则是当路由匹配时要渲染的内容。

import {BrowserRouter, Route, Link} from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>

      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </BrowserRouter>
  );
};

在上述代码中，我们创建了一个简单的路由组件。其中，<BrowserRouter>组件是React Router的核心组件，用于管理路由状态。<Route>组件用于定义路由规则，其中<path>属性指定了路由的匹配规则，<component>属性指定了当路由匹配时要渲染的组件。

3. 启动应用

创建好路由组件后，就可以启动应用了。在React中，可以使用ReactDOM.render()方法将组件渲染到页面上。

import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));

React 路由进阶

1. 嵌套路由

嵌套路由是指在一个路由内部再嵌套其他路由。嵌套路由可以帮助我们创建更复杂的应用结构，并使路由更加灵活。在React Router中，可以通过在<Route>组件中嵌套其他<Route>组件来实现嵌套路由。

import {BrowserRouter, Route, Link} from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>

      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />

      <Route path="/products" component={Products}>
        <Route path="/products/list" component={ProductList} />
        <Route path="/products/detail/:id" component={ProductDetail} />
      </Route>
    </BrowserRouter>
  );
};

在上述代码中，我们在<App>组件中嵌套了<Products>组件，并为<Products>组件定义了两个子路由：<ProductList>和<ProductDetail>。这样，当用户访问/products/list或/products/detail/:id时，就会分别渲染<ProductList>和<ProductDetail>组件。

2. 动态路由

动态路由是指路由的路径可以根据某些参数动态改变。在React Router中，可以通过在<Route>组件的<path>属性中使用参数来实现动态路由。

import {BrowserRouter, Route, Link} from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>

      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />

      <Route path="/products/:id" component={ProductDetail} />
    </BrowserRouter>
  );
};

在上述代码中，我们为<ProductDetail>组件定义了一个动态路由。当用户访问/products/1或/products/2时，就会分别渲染<ProductDetail>组件，并且可以将对应的产品ID作为参数传递给<ProductDetail>组件。

3. 路由守卫

路由守卫是指在进入某个路由之前进行某些检查或操作。在React Router中，可以通过使用<Route>组件的<children>属性来实现路由守卫。

import {BrowserRouter, Route, Link} from 'react-router-dom';

const App = () => {
  const isLoggedIn = true;

  return (
    <BrowserRouter>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>

      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />

      <Route path="/profile" component={Profile}>
        {isLoggedIn ? <Profile /> : <Redirect to="/login" />}
      </Route>
    </BrowserRouter>
  );
};