React Router 4入门指南：构建现代前端应用的中文导航系统
概述
在当今的前端开发领域，单页面应用（SPA）已经成为主流。为了实现页面之间的平滑切换和状态管理，前端路由技术显得尤为重要。React Router 作为 React 官方推荐的路由库，凭借其简洁的API和强大的功能，成为了众多开发者的首选。本文将带你一步步走进 React Router 4的世界，手把手教你构建一个现代前端应用的中文导航系统。
准备工作
在开始之前，确保你已经具备以下基础知识：
React 基础语法，特别是 JSX 语法
ES6 基础知识
Node.js 和 npm 环境
安装 React Router
首先，我们需要在项目中安装 React Router。打开终端，运行以下命令：
npm install react-router-dom
或者如果你使用的是 yarn：
yarn add react-router-dom
一、启动应用
创建一个新的 React 应用，可以使用
create-react-app
工具：
npx create-react-app react-router-demo
cd react-router-demo
启动应用：
npm start
二、创建一个简单的路由
在
src
目录下，创建几个简单的组件：
// src/About.js
import React from ‘react’;

const About = () => {
return

About Page

;
};

export default About;
// src/Repos.js
import React from ‘react’;

const Repos = () => {
return

Repos Page

;
};

export default Repos;
接下来，在
src/App.js
中配置路由：
import React from ‘react’;
import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;
import About from ‘./About’;
import Repos from ‘./Repos’;

const App = () => {
return (






);
};

export default App;
三、导航链接 Link 组件
为了让用户能够在不同的页面之间导航，我们需要使用
Link
组件：
import React from ‘react’;
import { BrowserRouter as Router, Route, Switch, Link } from ‘react-router-dom’;
import About from ‘./About’;
import Repos from ‘./Repos’;

const App = () => {
return (

);
};

export default App;
四、嵌套路由
在实际应用中，我们经常需要使用嵌套路由。假设
Repos
组件下还有两个子页面
Repo1
和
Repo2
：
// src/Repo1.js
import React from ‘react’;

const Repo1 = () => {
return

Repo1 Page

;
};

export default Repo1;
// src/Repo2.js
import React from ‘react’;

const Repo2 = () => {
return

Repo2 Page

;
};

export default Repo2;
修改
src/Repos.js
，添加嵌套路由：
import React from ‘react’;
import { Route, Switch, Link } from ‘react-router-dom’;
import Repo1 from ‘./Repo1’;
import Repo2 from ‘./Repo2’;

const Repos = () => {
return (

);
};

export default Repos;
五、为 Link 组件设置触发状态
为了让用户知道当前处于哪个路由下，我们可以为
Link
组件设置触发状态的样式。
使用
activeStyle
属性
修改
src/App.js
：
import React from ‘react’;
import { BrowserRouter as Router, Route, Switch, Link } from ‘react-router-dom’;
import About from ‘./About’;
import Repos from ‘./Repos’;

const App = () => {
return (

);
};

export default App;
使用
activeClassName
属性
更推荐的方法是使用
activeClassName
属性，为触发状态的链接添加一个类名：
import React from ‘react’;
import { BrowserRouter as Router, Route, Switch, Link } from ‘react-router-dom’;
import About from ‘./About’;
import Repos from ‘./Repos’;

const App = () => {
return (

);
};

export default App;
在
src/index.css
中添加样式：
.active {
color: red;
}
六、URL 参数
在实际应用中，我们经常需要从 URL 中获取参数。React Router 提供了
match
对象来获取这些参数。
假设我们有一个
User
组件，需要根据用户ID显示不同的用户信息：
// src/User.js
import React from ‘react’;

const User = ({ match }) => {
const { userId } = match.params;
return

User ID: {userId}

;
};

export default User;
在
src/App.js
中配置路由：
import React from ‘react’;
import { BrowserRouter as Router, Route, Switch, Link } from ‘react-router-dom’;
import About from ‘./About’;
import Repos from ‘./Repos’;
import User from ‘./User’;

const App = () => {
return (

);
};

export default App;
七、多层嵌套路由
在实际应用中，嵌套路由可能会更加复杂。我们可以通过在嵌套路由中继续使用
Switch
和
Route
来实现多层嵌套。
假设
Repo1
组件下还有两个子页面
Detail1
和
Detail2
：
// src/Detail1.js
import React from ‘react’;

const Detail1 = () => {
return

Detail1 Page

;
};

export default Detail1;
// src/Detail2.js
import React from ‘react’;

const Detail2 = () => {
return

Detail2 Page

;
};

export default Detail2;
修改
src/Repo1.js
，添加嵌套路由：
import React from ‘react’;
import { Route, Switch, Link } from ‘react-router-dom’;
import Detail1 from ‘./Detail1’;
import Detail2 from ‘./Detail2’;

const Repo1 = () => {
return (

);
};

export default Repo1;
八、IndexRoute 组件
IndexRoute
组件用于设置默认路由，当访问父路由时，会自动渲染
IndexRoute
指定的组件。
假设我们希望在访问
/repos
时，默认显示
RepoList
组件：
// src/RepoList.js
import React from ‘react’;

const RepoList = () => {
return

Repo List Page

;
};

export default RepoList;
修改
src/Repos.js
，添加
IndexRoute
：
import React from ‘react’;
import { Route, Switch, Link, Redirect } from ‘react-router-dom’;
import Repo1 from ‘./Repo1’;
import Repo2 from ‘./Repo2’;
import RepoList from ‘./RepoList’;

const Repos = () => {
return (

);
};

export default Repos;
九、IndexLink 组件
IndexLink
组件类似于
Link
组件，但它仅在匹配到父路由时才会激活。
修改
src/Repos.js
，使用
IndexLink
：
import React from ‘react’;
import { Route, Switch, Link, IndexLink } from ‘react-router-dom’;
import Repo1 from ‘./Repo1’;
import Repo2 from ‘./Repo2’;
import RepoList from ‘./RepoList’;

const Repos = () => {
return (

);
};

export default Repos;
总结
通过本文的学习，你已经掌握了 React Router 4 的基本用法，包括创建简单路由、使用
Link
组件进行导航、设置触发状态样式、处理 URL 参数、配置嵌套路由以及使用
IndexRoute
和
IndexLink
组件。这些知识将帮助你构建一个功能完善的前端导航系统。
当然，React Router 的功能远不止这些，还有更多高级用法等待你去探索。希望本文能为你打下坚实的基础，助你在前端开发的路上走得更远！
参考资料
React Router 官方文档
React Router 中文教程
Happy coding! 🚀