在ASP.NET MVC项目中刷新后，React链接页面变为404

Question

我试图弄清楚为什么手动刷新（F5）后下一页会显示404错误。首先，它可以正确加载，但是如果我仅刷新此页面，它将进入404。它的主要依存“会议”组件没有这样的问题。它刷新得很好。只是想让您知道，在.NET MVC项目中构建的React应用程序以及只有一部分视图是由React处理的。知道我应该做错什么吗？

#App.tsx

  import React from 'react'
  import { render } from 'react-dom'
  import { BrowserRouter } from 'react-router-dom'
  import { createBrowserHistory } from "history";
  import MeetingsRoutes from './MeetingsRoutes'

  function renderApp() {
      const history = createBrowserHistory();
      render(
        <BrowserRouter>
            <MeetingsRoutes/>
        </BrowserRouter>
        , document.getElementById('root')
      )
  }

  renderApp();

#MeetingsRoutes.tsx

import * as React from 'react'
import { Route, Switch } from 'react-router-dom'
import Meeting from './meeting/Meeting'
import { Fragment } from 'react';

export interface MeetingsRoutesState {
    history: any;
}

export default class MeetingsRoutes extends React.Component<{}, MeetingsRoutesState> {
    constructor(props: any) {
        super(props);
    }

    public render() {
        return (
            <Fragment>
                <Switch>
                    <Route exact path='/:baseUrl/Meeting' component={Meeting} />
                    <Route path='/:baseUrl/Meeting/:name/:country' component={MeetingDetails} />
                 </Switch>
            </Fragment>
        )
    }
}

Answer 1

如果使用的是SSR，则会发生这种情况。您在浏览器中以特定路线查看的页面是由React Router呈现的。

例如：/home上的主页。

在此处，当浏览器打开/路线时，反应路由器被激活，然后其他路线导航起作用。为了解决这个问题，您必须将服务器配置为将所有URL重定向到index.html /路由，然后将激活react router，然后路由到您的特定路径/home。请参阅下图以了解更多信息。

在Node js中，我们执行类似https://stackoverflow.com/questions/26349497/node-express-with-static-html-how-to-route-all-requests-to-index-html的操作。