Как предотвратить доступ маршрутизатора к маршрутизатору без действительного идентификатора?

Question

В моем файле App. js я использовал этот Switch logi c:

              <Switch>
                <Route path='/' exact component={Dashboard}/>
                <Route path='/question/:id' exact component={QPage}/>
                <Route path='/new' exact component={CreateQ}/>
                <Route path='/leaderboard' exact component={Leaderboard}/>
                <Route component={Error}/> 
              </Switch>

Приведенный выше код работает должным образом. Моя единственная проблема в том, что маршрутизатор обращается к / question /: id и, следовательно, отображает компонент QPage . Затем React выдает ошибку undefinded, потому что внутри компонента QPage элементы пытаются получить доступ к идентификатору и другим свойствам (которые они извлекают из URL-адреса). Как я могу предотвратить доступ маршрутизатора к маршрутам с недопустимыми идентификаторами?

Answer 1

На ум приходят два варианта, оба полагаются на пакет history:

1. обернуть компонент Qpage в класс Error Boundaries и вызвать history.goBack () в методе componentDidCatch https://reactjs.org/docs/error-boundaries.html

2. В компоненте Qpage componentDidMount вызовите history.goBack (), если API не вернет вопрос. Кроме того, условно визуализируйте возврат для свойства состояния, в котором хранится результат API.

{!this.state.property? <div/> : <div> . . . </div>}

Обязательно используйте историю версии 4.10.1, если React-Router-DOM - 5.2. 0

история. js

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
export default history;

индекс. js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import {Router} from 'react-router-dom'
import history from './history.js'

ReactDOM.render(
    <Router history={history}>
        <App />
    </Router>,
    document.getElementById('root')
)

Qpage или границы ошибок

import history from './history'