Question

我正在使用React构建网站并使用React-Router，我希望在用户访问网址时呈现404页面。

有些网址是动态的，比方说，

www.site.com/user/(username)

如果具有特定用户名的用户不存在，如何使用react-router呈现404页面？在API调用期间，我是否必须在组件本身中手动编写代码以检查用户是否存在，然后将用户重定向到404组件？

我正在寻找将用户重定向到未找到页面的最佳方法。寻找有关如何做到最好的想法。

Answer 1

您可以查看this.props.match.username是否存在。如果确实如此，那么如果它没有那么正常呈现，则使用React-Router Redirect组件重定向到404组件。如果您有多个需要此功能的路径，那么您可以考虑为此目的制作HOC。

Answer 2

使用“切换”然后“重定向”

https://reacttraining.com/react-router/web/example/no-match

https://reacttraining.com/react-router/web/api/Redirect

有效网址无重定向：/user/valid_username

404 URL重定向：/user/invalid_username

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Switch>
            <Route path="/user/:username" component={Child} />
            <Route path="/404" component={NoMatch} />
            <Route component={NoMatch} />
          </Switch>
        </div>
      </Router>
    )
  }
}

function Child({ match }) {
  // perform some username check
  if (match.params.username !== 'valid_username') {
    return (
      <div>
        <Redirect to="/404" />
      </div>
    )
  }
  return (
    <div className="App">
      <h3>ID: {match.params.username}</h3>
    </div>
  )
}

function NoMatch({ location }) {
  return (
    <div>
      <h3>
        404 - No match for <code>{location.pathname}</code>
      </h3>
    </div>
  )
}

export default App

如何使用React-Router在React中正确呈现404页面？

2 个答案: