React路由与项目实践笔记

React是一个流行的JavaScript库，用于构建单页面应用程序（SPA）。单页面应用程序通常使用路由来管理不同的页面和视图，以实现无需刷新整个页面就可以观察到不同视图的效果。React Router是React的一个流行路由库，它提供了一个声明式的方式来定义路由和视图之间的映射。

1.安装React Router

React Router可以通过npm安装，在项目文件夹中运行以下命令：

npm install react-router-dom

2.配置路由

在React中配置路由非常简单。你可以通过将组件包装在组件内来定义路由。例如：

import { Switch, Route } from 'react-router-dom'; 
function App() { 
    return ( 
        <div> 
            <Switch> 
                <Route exact path="/" component={Home} /> 
                <Route path="/about" component={About} /> 
                <Route path="/contact" component={Contact} />
            </Switch> 
        </div> 
    ); 
}

在上面的示例中，我们创建了三个路由，分别对应于主页、关于页面和联系页面。我们使用exact关键字来确保只有当路径完全匹配时才显示主页。

3.导航到不同的路由要在React中导航到不同的路由，我们可以使用<Link>组件或<a>标签。例如：

import { Link } from 'react-router-dom';

function Navbar() {
? return (
? ? <div>
? ? ? <ul>
? ? ? ? <li><Link to="/">Home</Link></li>
? ? ? ? <li><Link to="/about">About</Link></li>
? ? ? ? <li><Link to="/contact">Contact</Link></li>
? ? ? </ul>
? ? </div>
? );
}

在上面的示例中，我们创建了一个导航栏，其中包含指向不同路由的链接。当用户单击链接时，React Router会更新URL并显示相应的组件。

4. 传递参数

有时我们需要将参数传递给路由。在React Router中，我们可以使用路由参数来实现这一点。例如：

```
<Route path="/users/:id" component={User} />
```

在上面的示例中，我们使用:id占位符来定义一个路由参数。当用户访问/users/1时，React Router会将1作为参数传递给User组件。我们可以使用this.props.match.params.id来访问该参数。

5. 使用嵌套路由

有时候我们需要使用嵌套路由来组织应用程序。在React Router中，我们可以通过在组件中定义子<Route>组件来实现嵌套路由。例如：

function App() {
? return (
? ? <div>
? ? ? <Switch>
? ? ? ? <Route exact path="/" component={Home} />
? ? ? ? <Route path="/users" component={Users} />
? ? ? </Switch>
? ? </div>
? );
}

function Users() {
? return (
? ? <div>
? ? ? <h2>Users</h2>
? ? ? <Switch>
? ? ? ? <Route exact path="/users" component={UserList} />
? ? ? ? <Route path="/users/:id" component={User} />
? ? ? </Switch>
? ? </div>
? );
}

在上面的示例中，我们定义了一个Users组件，并在其中定义了两个子<Route>组件。当用户访问/users时，UserList组件将被渲染。当用户访问/users/1时，User组件将被渲染，并将1作为参数传递给它。

总之，React Router是一个非常强大的库，它提供了一种简单而灵活的方式来管理React应用程序中的路由和视图。通过使用React Router，我们可以轻松地构建出功能强大且易于维护的单页面应用程序。