Question

我正在尝试处理用户正在编写不存在的路径的情况。例如，如果用户点击Will Not Match链接，那么NoMatch组件会按预期呈现。

但是，如果用户转到url并将其更改为“/ abcd”，则会向服务器发送GET请求并返回错误，因此不会使用react路由器。我怎样才能在这种情况下呈现NoMatch组件呢？

我正在使用react-router v4，BTW。

import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'

const NoMatch = ({ location }) => (
      <div>
          <h3>No match for <code>{location.pathname}</code></h3>
      </div>
    )

class App extends React.Component {
    render(){
        return (
          <Router>
              <div>
                  <Link to="/page1">page1</Link>
                  <Link to="/page2">page2</Link>
                  <Link to="/will/not/match">Will Not Match</Link>

                  <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/page1" component={page1}/>
                    <Route path="/page2" component={page2}/>
                    <Route component={NoMatch}/>
                  </Switch>
              </div>
          </Router>
        )
    }
}

Answer 1

您通常需要在服务器端处理手动URL写入。在浏览器方面没有办法（至少我不知道）处理这个问题。

所以基本上这个想法是，在服务器端，总是返回你的应用程序，无论被调用的url（为你的api模拟一些特殊的路由或其他）

因此，当您的用户请求/abc

时

服务器将返回应用程序（例如index.html）;
您的浏览器将加载JS应用程序;
路由器将读取URL;
将显示NoMatch组件。

反应路由器的NoMatch

1 个答案: