Question

我正在尝试一些React路由，在尝试创建错误页面时遇到了一个问题，该错误页面在用户每次收到404错误时都会出现，并提示一条消息：

import React from "react";

const Error = props => {
    return(
        <div>
        <p>
            Path does not exist!
        </p>
        </div>
    )

}

export default Error;

我用switch语句包装了所有路径，以便仅将其应用于绝对路径。

class App extends Component {

  render() {
    return (
      <BrowserRouter>
    <Switch>
    <div>
      <Route exact path="/"   component={Home}  />
      <Route exact path="/about"  component={About} />
      <Route path="*" exact component={Error} />
      </div>
    </Switch>
    </BrowserRouter>
    );
  }
}

但是知道每当我访问路径时，就会出现“错误”组件。

但是，由于我包装了Switch组件并使用了精确的组件，所以只要不存在其他路径，是否不应该只显示Error组件？

Answer 1

   <Switch>
      <Route exact path="/"   component={Home}  />
      <Route exact path="/about"  component={About} />
      <Route component={Error} />
    </Switch>

请勿添加错误路由的路径。

在所有路径上都显示未找到React Router页面

1 个答案: