将GET参数转换为干净的URL

// 假设当前URL是 http://example.com/?name=John&age=30

// 获取当前URL的查询字符串
const queryString = window.location.search;

// 解析查询字符串为对象
const queryParams = new URLSearchParams(queryString);

// 构建新的URL路径
const cleanUrl = `/user/${queryParams.get('name')}/age/${queryParams.get('age')}`;

console.log(cleanUrl); // 输出: /user/John/age/30

window.history.pushState({}, '', cleanUrl);

RewriteEngine On
RewriteCond %{QUERY_STRING} name=([^&]+)&age=([^&]+)
RewriteRule ^$ /user/%1/age/%2? [R=301,L]

server {
    listen 80;
    server_name example.com;

    location / {
        if ($arg_name && $arg_age) {
            return 301 /user/$arg_name/age/$arg_age;
        }
        # 其他配置...
    }
}

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/user/:name/age/:age" component={UserProfile} />
        {/* 其他路由 */}
      </Switch>
    </Router>
  );
}

function UserProfile({ match }) {
  const { name, age } = match.params;
  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

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

<Link to={`/user/John/age/30`}>John's Profile</Link>