Question

我正在为我的应用程序使用react-router，当我将其部署在服务器上时，我注意到如果在打开主目录URL之前请求任何URL，它将返回404。然后在访问主目录URL之后，所有其他URL将工作正常！

index.tsx：

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
  ,
  document.getElementById('root') as HTMLElement
);

App.tsx：

public render()
  {
    return(
        <div className="App">
            <div className="row margin-auto">
                <Header/>
                <Main/>
            </div>
        </div>
    )
  }

Main.tsx：

public render()
    {
        return (
            <div id="main" className="col col-9-and-half no-padding-h vh-100">
                <div className="container-fluid no-padding-h">
                    <main>
                        <Switch>
                            <Route path='/home' component={Home} />
                            <Route exact={true} path='/' component={Home} />
                            <Route path="/matches" component={Matches} />
                            <Route path='/login' component={Login} />
                            <Route path='/sign-up' component={SignUp} />
                            <Route path='/contact-us' component={ContactUs} />
                        </Switch>
                    </main>
                </div>
            </div>
        )
    }

例如，当我尝试打开www.mywebsite.com/sign-up时，它将返回404，但是如果我先打开www.mywebsite.com，然后尝试访问www.mywebsite.com/sign-up，它将返回工作正常。

Answer 1

看来您的服务器中没有重定向设置。为了使单个页面的JavaScript应用程序正常工作，必须确保服务器为所有路径提供index.html服务。

要注意的一件事是，您将必须在react-router中管理404处理。这可以通过在路径定义的末尾添加<Route />而不添加path道具来实现。重要的是它必须在末尾，以便在显示404之前耗尽所有路线可能性

<Switch>
  <Route path='/home' component={Home} />
  <Route exact={true} path='/' component={Home} />
  <Route path="/matches" component={Matches} />
  <Route path='/login' component={Login} />
  <Route path='/sign-up' component={SignUp} />
  <Route path='/contact-us' component={ContactUs} />
  <Route component={NotFound} />
</Switch>

Answer 2

感谢Seth和William Chou指导我回答问题，我进行了以下htaccess配置来处理请求，现在一切似乎都正常了：

<ifModule mod_rewrite.c>
    RewriteEngine On

    RewriteBase /

    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d

    RewriteRule . /index.html [L]
</ifModule>

在访问家庭URL之前访问的任何URL上返回404

2 个答案: