Question

我在apache / PHP服务器上运行了一个React应用程序。

React应用加载在主路径上。也就是说，PHP配置为在加载React应用程序的index.html路由上加载/。

的index.html

// ....
<div id="react-hook"></div>

<script>
    const wrapper = document.getElementById("react-hook");
    wrapper ? ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, wrapper) : false;
</script>

（我实际上正在使用webpack，但这就是它的主旨）

我使用react-router来定义一些路线：

const Routes = () => (

    <div>                
        <Route exact path="/" component={Home} />
        <Route path="/login" component={Login} />
        <Route path="/test" component={Test} />
    </div>

)

用一些链接渲染它们。

<Link to="/>Home</Link>     
<Link to="/login>Login</Link>
<Link to="/test>Test</Link>

这很好用但是当我硬重新加载页面时，加载的路由是在服务器上定义的路径。

为了解决这个问题，我在服务器上设置了一条规则，将所有请求转发到/所在的归属路由index.html - 这样就可以为所有请求加载我的反应应用。

这更接近于解决我的问题，但现在所有的硬装路线都让我在家里的反应路线上，而不是我试图重新装载的路线。

behavior: /test (hard route) ---> / (soft route)

should be: /test (hard route) ---> /test (soft route)

为react应用程序实现硬重载的正确方法是什么？

Answer 1

这取决于您使用的服务器。您不希望将所有请求转发给/。无论您收到什么请求，都希望显示/index.html 。如果用户请求/test，您的服务器会向他们/index.html但将其称为 /test。他们没有获得404，他们没有获得301.他们获得了/test的状态代码200，但他们获得了/index.html的内容。

对于nginx，这类似于try_files $uri index.html。

对于Apache，您可以使用mod_rewrite重写所有不存在的（类似RewriteCond %{REQUEST_FILENAME} !-f的内容，条件是文件不存在以进行重写）使用/index.html RewriteRule .* /index.html的路径。

React应用程序只需要相同的入口点（<App />），并且页面加载时React路由器将使用页面URL进行相应的导航，因此所有路由使用相同的index.html登陆他们要去了。

在React中实现硬重载

1 个答案: