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

Question

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

提前谢谢你们

Answer 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。

Answer 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 ...
}