随机查询字符串通过 react-router-config 在调用组件上加载未找到结果的页面

Question

我正在尝试加载产品页面。我有一些基于我想做一些业务逻辑的查询参数，比如 /productsPage?pg=2。不幸的是，这种类型的 URL 与 App 和 NoFoundPage 匹配。预期结果应为 App 和 ProductsListPage.

routes.js

import { RouteConfig } from 'react-router-config';

import App from './App';
import HomePage from './HomePage';
import ProductsListPage from './ProductsListPage';

export default [
  {
    ...App,
    routes: [
      {
        component: HomePage,
        path: '/',
        exact: true
      },
      {
        component: UploaderPage,
        path: '/uploader'
      },
      {
        component: ProductsListPage,
        path: '/productsList'
      },
      {
        component: NotFoundPage
      }
    ]
  }
]

import Routes from './routes';
import { matchRoutes } from 'react-router-config';
console.log(matchRoutes(Routes, req.url));

matchRoutes 在使用 /productsList?pg=2.

时记录 App 和 No Found Page

注意：pg=2不是固定的，我们可以根据需要添加任意多的查询参数。喜欢 /productsList?pg=2&sort=desc

Answer 1

改用req.path。

console.log(matchRoutes(Routes, req.path));

随机查询字符串通过 react-router-config 在调用组件上加载未找到结果的页面

Random query strings load no result found page on calling component through react-roter-config

javascript

reactjs

react-router

server-side-rendering