前端面试题大汇总：React 篇-路由

1. 什么是 React Router？它的主要特点是什么？

React Router 是一个用于 React 应用的路由库，它允许你在单页应用（SPA）中实现多页面的导航和路由管理。

主要特点：

声明式路由：使用声明式的方式来定义路由，使代码更加清晰和易于维护。
动态路由匹配：支持动态参数匹配，可以根据 URL 参数动态加载不同的组件。
嵌套路由：支持嵌套路由，可以轻松实现多级嵌套的页面结构。
编程式导航：提供编程式导航的方法，可以在代码中控制页面的跳转。
路由守卫：支持路由守卫，可以在路由切换前后执行特定的逻辑。
懒加载：支持代码分割和懒加载，可以按需加载组件，提高应用性能。

2. 如何在 React 中实现路由？

在 React 中使用 React Router 实现路由的基本步骤如下：

安装 React Router：
```
npm install react-router-dom
```

引入必要的组件：

jsx
深色版本
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

配置路由：

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';

const App = () => (
  <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;

3. 什么是 Route 和 Link？它们的作用是什么？

Route：

作用：定义一个路由规则，当 URL 匹配时，会渲染对应的组件。
属性：
- path：定义匹配的路径。
- component：匹配路径时渲染的组件。
- exact：是否精确匹配路径。
- render：匹配路径时渲染的函数。
- children：匹配路径时渲染的子组件。

示例：

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

Link：

作用：用于在应用中创建导航链接，点击后会改变 URL 并触发路由匹配。
属性：
- to：目标路径。

示例：

<Link to="/">Home</Link>
<Link to="/about">About</Link>

4. 什么是 Switch？它的作用是什么？

Switch：

作用：用于包裹多个 Route 组件，确保只有一个 Route 被渲染。当找到第一个匹配的 Route 时，停止匹配后续的 Route。
优点：避免多个 Route 同时匹配，确保路由的唯一性。

示例：

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

5. 如何实现嵌套路由？

嵌套路由是指在一个路由组件中定义子路由，实现多级嵌套的页面结构。

示例：

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 Profile from './Profile';

const App = () => (
  <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>
);

const Contact = () => (
  <div>
    <h2>Contact</h2>
    <nav>
      <ul>
        <li><Link to="/contact/profile">Profile</Link></li>
      </ul>
    </nav>

    <Switch>
      <Route path="/contact/profile" component={Profile} />
    </Switch>
  </div>
);

export default App;

6. 什么是 Redirect？它的作用是什么？

Redirect：

作用：用于在组件中进行重定向，将用户从当前路径重定向到另一个路径。
属性：
- from：当前路径。
- to：目标路径。
- push：是否将重定向路径添加到历史记录中。

示例：

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';

const App = () => (
  <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} />
        <Redirect from="/old-path" to="/new-path" />
      </Switch>
    </div>
  </Router>
);

export default App;

秒客网