如果没有查询字符串，react-router 重定向到 404答案

【问题标题】：Redirect to 404 if there is no query string, react-router如果没有查询字符串，react-router 重定向到 404
【发布时间】：2017-06-21 09:53:48
【问题描述】：

我是使用 react-router 的初学者，并且自己也会做出反应。我有一条链接到“/items”的路线，它取决于查询字符串 ex。 'items?item_id=156' 并显示项目的信息。我让它像那样工作，但如果用户只访问没有查询字符串的“/items”，我想显示 404。

提前谢谢大家

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

在这种情况下，您必须使用 wildcard 匹配项。你可以这样做：

import React from 'react';
import { Switch } from 'react-router';
import { BrowserRouter , Route ) from 'react-router-dom;
import NotFound from './NotFound'
import ItemPage from './ItemPage'

const routes = (    import NotFound from './NotFound'

               <BrowserRouter>
                  <Switch>
                     <Route path="*" component={NotFound}/>
                     <Route path="/items/:id/" component={ItemPage}/>
                  </Switch>
                </BrowserRouter>

               )

假设您使用的是 react-router v4。

【讨论】：

是的，我目前正在使用 react-router v4，这也是我所做的，但有没有办法可以使用查询字符串，因为我可以给它多个查询/参数，例如 'items?item_id=1&sample =2.
你可以做类似path='/item/:id/:sample'的事情。

【解决方案2】：

如果item_id 不可解析，您可以进行重定向。例如：

import queryString from 'query-string'
import { Redirect } from 'react-router-dom'

export default function Items() {
  const queryValues = queryString.parse(this.props.location.search)
  const itemId = queryValues['item_id']

  if (isNaN(itemId)) {
    return <Redirect to="/404.html" />
  }
  return ...
}

【讨论】：