在访问主 URL 之前访问的任何 URL 上返回 404 [英] 404 returned on any URL accessed before accessing the home URL

问题描述

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

index.tsx:

ReactDOM.render(<浏览器路由器><应用程序/></BrowserRouter>,document.getElementById('root') 作为 HTMLElement);

App.tsx:

公共渲染(){返回(<div className="应用程序"><div className="row margin-auto"><标题/><主要/>

)}

Main.tsx:

公共渲染(){返回 (<div id="main" className="col col-9-and-half no-padding-h vh-100"><div className="container-fluid no-padding-h"><主要><开关><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}/></开关></main>

)}

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

解决方案

谢谢Seth &William Chou 指导我回答，我做了以下 htaccess 配置来处理请求，一切似乎现在工作正常:

重写引擎开启重写基数/重写规则 ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-d重写规则./index.html [L]</ifModule>

I am using react-router for my app, when I deployed it on the server I noticed that if I requested any URL before opening the home URL, it will return 404. Then after accessing the home URL, all other URLs will work fine!

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>
        )
    }

for example, when I try to open www.mywebsite.com/sign-up it will return 404, but if I opened www.mywebsite.com first then tried to access www.mywebsite.com/sign-up it will work fine.

解决方案

Thank you Seth & William Chou for guiding me to the answer, I made the following htaccess configs to handle the requests, and everything seems to work fine now:

<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！