Question

在我的 App.js 文件中，我使用了以下 Switch 逻辑：

              <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引发未定义的错误，因为元素在 QPage 组件内部尝试访问id和其他道具（它们从URL中取出）。如何防止路由器访问具有无效ID的路由？

Answer 1

想到两个选项，它们都依赖于历史记录包：

将Qpage组件包装到Error Boundaries类中，并在componentDidCatch方法https://reactjs.org/docs/error-boundaries.html中调用history.goBack（）
如果API无法返回问题，请在Qpage的componentDidMount中，调用history.goBack（）。此外，有条件地将返回值存储在存储API结果的state属性周围。

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

如果React-Router-DOM为5.2.0，请确保使用历史记录版本4.10.1

history.js

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

index.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'

如何防止路由器访问没有有效ID的路由？

1 个答案: