<code>// routes.js

import React from 'react';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './components/Home';

import About from './components/About';

import Contact from './components/Contact';

import Products from './components/Products';

import ProductDetails from './components/ProductDetails';

function App() {

return (

<Router>

<Navbar />

<Switch>

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

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

<Route path="/contact" component={ Contact} />code>

<Route path="/products" exact component={ Products} /> { /* 定义嵌套路由 */}code>

<Route path="/products/:id" component={ ProductDetails} /> { /* 定义带参数的嵌套路由 */}code>

</Switch>

</Router>

);

}

export default App;

在上面的例子中，我们在/products路由下定义了一个嵌套路由/products/:id，其中:id表示参数，可以在ProductDetails组件中通过props.match.params.id获取传递的参数值。

3.2 参数传递和处理

React-Router支持在路由之间传递参数，包括路径参数和查询参数。可以在路由中定义参数，并在组件中通过props.match.params和props.location.search来获取参数值。

// routes.js

import React from 'react';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './components/Home';

import About from './components/About';

import Contact from './components/Contact';

import Products from './components/Products';

import ProductDetails from './components/ProductDetails';

function App() {

return (

<Router>

<Navbar />

<Switch>

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

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

<Route path="/contact" component={ Contact} />code>

<Route path="/products"exact component={ Products} />code>

<Route path="/products/:id" component={ ProductDetails} />code>

</Switch>

</Router>

);

}

export default App;

在上面的例子中，我们在/products/:id路由中定义了一个参数:id，可以通过props.match.params.id在ProductDetails组件中获取传递的参数值。

3.3 路由守卫实现权限控制

React-Router提供了路由守卫（Route Guard）功能，可以在路由渲染之前进行权限验证，例如登录验证、权限验证等。

// PrivateRoute.js

import React from 'react';

import { Route, Redirect } from 'react-router-dom';

// 自定义私有路由守卫组件

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => {

return (

<Route

{ ...rest}

render={ (props) =>

isAuthenticated ? ( // 判断是否登录

<Component { ...props} />

) : (

<Redirect to="/login" /> // 未登录则跳转到登录页面code>

)

}

/>

);

};

export default PrivateRoute;

在上面的例子中，我们定义了一个私有路由守卫组件PrivateRoute，通过isAuthenticated参数来判断用户是否已登录，如果已登录，则渲染目标组件，否则跳转到登录页面。

可以在应用中使用这个私有路由守卫组件来实现登录验证，例如：

// routes.js

import React from 'react';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './components/Home';

import About from './components/About';

import Contact from './components/Contact';

import Products from './components/Products';

import ProductDetails from './components/ProductDetails';

import PrivateRoute from './components/PrivateRoute'; // 引入私有路由守卫组件

function App() {

const isAuthenticated = true; // 判断用户是否已登录，这里假设已登录

return (

<Router>

<Navbar />

<Switch>

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

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

<Route path="/contact" component={ Contact} />code>

{ /* 使用私有路由守卫进行权限控制 */}

<PrivateRoute

path="/products"code>

exact

component={ Products}

isAuthenticated={ isAuthenticated}

/>

<PrivateRoute

path="/products/:id"code>

component={ ProductDetails}

isAuthenticated={ isAuthenticated}

/>

</Switch>

</Router>

);

}

export default App;

在上面的例子中，我们通过PrivateRoute组件对/products和/products/:id路由进行了权限控制，只有在用户已登录的情况下才能访问这些路由。

4. 代码分割和懒加载优化