react-router-nav:用CodeSandbox创建

在React开发中，路由管理是构建可交互、可导航Web应用的关键部分。`react-router`是React社区广泛使用的路由库，它允许我们定义应用程序的URL结构，并与组件的状态紧密关联，实现页面间的平滑切换。本教程将详细介绍如何使用CodeSandbox这个在线IDE来创建一个基于`react-router-dom`的简单导航系统。 我们需要了解`react-router-dom`的基本概念。它是`react-router`的一个子模块，专门用于DOM环境，如浏览器。主要包含以下核心组件： 1. **`BrowserRouter`**：作为应用程序的顶级组件，它监听浏览器的URL变化，并将这些变化传递给`Route`组件。 2. **`Route`**：定义了根据URL匹配并渲染的组件。每个`Route`都有一个`path`属性，当URL与`path`匹配时，对应的组件会被渲染。 3. **`Link`**：用于创建导航链接。点击`Link`时，不会像常规HTML链接那样刷新页面，而是改变URL并触发`BrowserRouter`的更新。 4. **`NavLink`**：`Link`的增强版，可以添加激活状态，使当前活动的链接突出显示。 现在，让我们通过CodeSandbox开始创建项目： 1. 访问[CodeSandbox](https://codesandbox.io/)，点击“创建新项目”。 2. 在模板选择页面，选择“从头开始”（Blank）。 3. 在项目设置中，确保你已经安装了`react`, `react-dom`, 和`react-router-dom`。如果没有，点击依赖管理器，搜索并添加这些库。 4. 创建一个新的`src`目录，然后在其中创建`App.js`文件。这是你的主应用组件。 5. 在`App.js`中，导入所需的`react-router-dom`组件： ```jsx import { BrowserRouter as Router, Route, Link, NavLink } from "react-router-dom"; ``` 6. 定义两个或更多个`Route`，每个`Route`对应一个页面组件。例如，创建`Home`和`About`组件： ```jsx function Home() { return <h2>首页</h2>; } function About() { return <h2>关于</h2>; } ``` 7. 在`App`组件内，用`Router`包裹整个应用，并添加`Route`和`NavLink`： ```jsx function App() { return ( <Router> <nav> <ul> <li> <NavLink exact to="/" activeClassName="active"> 首页 </NavLink> </li> <li> <NavLink to="/about" activeClassName="active"> 关于 </NavLink> </li> </ul> </nav> {/* 路由匹配的组件 */} <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> </Router> ); } export default App; ``` 8. 添加CSS样式，为当前激活的`NavLink`设置高亮： ```css .active { color: red; } ``` 9. 保存所有更改，CodeSandbox会自动刷新预览，你现在应该可以看到一个简单的导航系统，可以在页面间自由切换。 通过这种方式，你可以快速地在CodeSandbox上搭建一个基于`react-router-dom`的React应用。这只是一个基础示例，实际项目中可能需要处理更复杂的路由配置，比如嵌套路由、动态路由参数等。不过，有了这个起点，你可以进一步学习和扩展你的React导航系统。