Перенаправить на 404, если нет строки запроса, реагировать-маршрутизатор

Я новичок в использовании реактивного маршрутизатора, а также реагирую сам. У меня есть маршрут, который ссылается на «/items», и он зависит от строки запроса ex. 'items?item_id=156' и отображает информацию о предмете. Я заставляю это работать именно так, но я хочу показать 404, если пользователь посетил только «/items» без строки запроса.

Спасибо, ребята, заранее


reactjs react-router-dom react-router
person Romyeo    schedule 21.06.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

В этом случае вам придется использовать шаблон. Вы можете сделать что-то вроде:

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.

person Ozan    schedule 21.06.2017
comment
Да, в настоящее время я использую react-router v4, это тоже то, что я сделал, но есть ли способ, которым я мог бы использовать строку запроса, потому что я могу указать несколько запросов/параметров, например, 'items?item_id=1&sample=2. - person Romyeo; 21.06.2017
comment
Вы можете сделать что-то вроде path='/item/:id/:sample'. - person Ozan; 21.06.2017

arrow_upward
0
arrow_downward

Вы можете сделать перенаправление, если 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 ...
}
person David    schedule 25.03.2019