如何避免 react-router 出现 404 页面？

Question

我正在研究一个使用 React Router 的简单示例。

我使用 create-react-app 创建了它

在本地服务器上，每个链接都运行良好，例如）localhost:3000/login、localhost:3000/product 等。

部署到我的域后，输入链接时出现 404 错误。 例如）myDomain.com/login、myDomain.com/product

在本地服务器上看起来不错，所以我认为源代码没有问题。

然后，当出现 404、403... 等页面时，我收到了重定向到 index.html 页面的答案

localhost:3000 和 localhost:3000/index.html 是否相同？

在主页（本地主机：3000 或 myDomain.com）上，呈现良好。

在 index.html (localhost: 3000 / index.html 或 myDomain.com/index.html) 中，它仅在 {Home} 上方呈现最多 h1 标记。 从这里有什么问题吗？

请帮帮我TT

应用程序.js

class App extends Component{
  render(){        
    return (
      <div className="App">
        <Header/>
        <h1>asd</h1>
        <h1>asd</h1>
        <Route exact path = "/" component = {Home}/>
          <Route path = "/about" component = {About}/>
          <Route path = "/event" component = {Event}/>
          <Route path = "/qna" component = {QnA}/>
          <Route path = "/login" component = {Login}/>
          <Route path = "/join" component = {Join}/>
          <Route path = "/product" component = {Product}/>
      </div>
    );
  }
}

export default App;

根.js

const Root = () => {
    return (
        <BrowserRouter>
            <App/>
        </BrowserRouter>

    );
};

export default Root;

Answer 1

您可以将路由组件包装在 switch 组件中，如果没有匹配项，则呈现默认组件，如下所示。

<Switch>
    <Route exact path = "/" component = {Home}/>
    <Route path = "/about" component = {About}/>
    <Route path = "/event" component = {Event}/>
    <Route path = "/qna" component = {QnA}/>
    <Route path = "/login" component = {Login}/>
    <Route path = "/join" component = {Join}/>
    <Route path = "/product" component = {Product}/>
    <Route component={NoMatch} />
</Switch>

显然，您可以使用您想要的默认组件来更改NoMatch组件。

Answer 2

您需要为您的应用程序启用服务器端渲染，当您重新加载/mydomain.com/login页面时，服务器正在寻找服务器端不存在的特定路由，服务器知道的唯一路由是/ 。

在您的情况下，除非启用服务器端渲染，否则路由由浏览器处理。

不， localhost:3000和localhost:3000/index在反应应用程序中不是同一条路线。

Answer 3

使用 react-router v4，您可以通过两种方式处理 404：

1. 保留路径并显示 404 页面：

<Switch>
    <Route exact path="/" component={MyComponent} />
    <Route component={GenericNotFound} />
</Switch>

2. 更改路径（重定向）并显示 404 页面：

<Switch>
    <Route path="/users" component={MyComponent} />
    <Redirect to="/404" />
</Switch>

Answer 4

您应该将基本名称添加到根中的 BrowserRouter 组件

ReactDOM.render(
  <BrowserRouter basename='/My-App/'>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>
  ,
  document.getElementById('root')
);

此外，您应该确保在 404 种情况下您被重定向到 index.html 因为它是一个 SPA 并且一切都在那里发生，您只需将此行替换为 package.Z466DEEC76ECDF24D154F3 中的“构建”脚本即可

 "build": "react-scripts build && cp build/index.html build/404.html",

Answer 5

我不认为这是您的反应应用程序问题，而是您的应用程序的部署方式。

我希望您已经使用生产构建部署了您的应用程序（使用npm run build ）。 如果是这样，这很可能是您的 web 服务器没有重定向到正确的条目。

您需要告诉您的 web 服务器（无论您使用的是 nginx 还是 caddy）指向/index.html时达到 404。这是 ZEE434023CF89D7DFB21F63D64F0FD9 的简单配置。

https://www.barrydobson.com/post/react-router-nginx/