React router v5创建具有两个可选参数的路径

React Router是一个用于构建单页面应用的库，它可以帮助我们在React应用中实现路由功能。React Router v5是React Router库的第五个主要版本。

在React Router v5中，可以使用<Route>组件来定义路由，该组件接受一个path属性用于指定路径。如果想要为路径指定可选参数，可以使用:来定义参数，参数名称放在:后面。例如，我们可以定义一个路径为/user/:id，其中:id表示一个可选的用户ID参数。

以下是React Router v5创建具有两个可选参数的路径的示例代码：

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

const App = () => {
  return (
    <Router>
      <Route path="/user/:id/:name?" component={User} />
    </Router>
  );
}

const User = ({ match }) => {
  const { id, name } = match.params;
  
  return (
    <div>
      <h1>User ID: {id}</h1>
      {name && <p>Name: {name}</p>}
    </div>
  );
}

export default App;

在上面的代码中，我们使用<Route>组件创建了一个路径为/user/:id/:name?的路由。:id表示必选参数，而:name?表示可选参数。当用户访问/user/123时，将会渲染User组件，并且match.params中的id值为123，name值为undefined。当用户访问/user/123/john时，match.params中的id值为123，name值为john。