19、React Router与常见反模式解析

React Router与常见反模式解析

1. React Router添加路由参数

在使用 React Router 实现了基本路由后，接下来可以为路由添加参数。以显示联系人列表和单个联系人信息为例，以下是具体的实现步骤：
1. 创建 Contacts 组件 ：
css .Contacts ul { list-style: none; margin: 0; margin-bottom: 20px; padding: 0; } .Contacts ul li { padding: 10px; } .Contacts a { color: #555; text-decoration: none; } .Contacts a:hover { color: #ccc; text-decoration: none; }
2. 导入组件到路由文件 ：
javascript // Dependencies import { Route, Switch } from 'react-router-dom' // Components import App from './components/App' import About from './components/About' import Contact from './components/Contact' import Home from './components/Home' import Error404 from './components/Error404' import Contacts from './com