从浏览器URL进行React Router Render

如何解决从浏览器URL进行React Router Render

因此，我使用React建立了一个网站，但是没有一条路线可以直接访问。如果重要的话，托管我的反应代码的服务器是CPanel。

我了解到对于诸如www.website.com/about之类的路由，服务器上实际上不存在“ / about”。当用户单击应用程序并“浏览”网页时，React动态更新浏览器URL。如果用户尝试直接访问about路由，则服务器将不知道该怎么做，除非我做一些额外的工作。

但是必须有一种方法可以直接在浏览器中键入“ www.website.com/about”（使用基于React的网站）并直接访问该页面，对吧？

我读了this和this，都提到了全部解决方案。我想到目前为止，我的“ htaccess”文件已经获得了该解决方案的一半（例如，如果您在浏览器URL中键入www.website.com/about，它将仅重定向到我网站的首页）。

现在，我希望我的代码能够解析浏览器URL，并知道呈现正确的页面/组件，而不仅仅是重定向到我的主页。我的困惑源于以下内容（引自第二个链接）：

包罗万象

如果您已经在使用服务器，则可能是你最好的选择。这里的主要思想是您重定向所有服务器请求/index.html。结果类似于哈希历史。 对服务器的任何请求都将以索引页（然后获取所需的任何JS资源），React Router 然后将接管并加载适当的视图。的实际代码这取决于您拥有的服务器类型。

（重点是我的）

因此，我的.htaccess文件确实可以对index.html页面做出响应。现在，我希望React Router“接管并加载适当的视图”。这是我的代码有问题还是与服务器有关？

作为参考，以下内容包含我的.htaccess文件的内容。（提前道歉，我对如何编写htaccess文件一无所知，这些文件都是从我发现的随机教程中复制的）：

RewriteEngine On 
RewriteBase /
RewriteCond %{SERVER_PORT} 80
RewriteCond %{HTTP_HOST} ^(www\.)?wiseattend\.com
RewriteRule ^(.*)$ https://www.wiseattend.com/$1 [R,L]
RewriteCond %{THE_REQUEST} /([^.]+)\.html [NC]
RewriteRule ^ /%1 [NC,L,R]
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^ %{REQUEST_URI}.html [NC,L]
RewriteRule ^index\.html$ / [R=301,L]

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

这是我的反应代码中的App.js文件：

import React,{ useState,useLayoutEffect,useEffect } from 'react';
import { BrowserRouter as Router,Route,Switch,Redirect } from 'react-router-dom';
import { history } from './history';


// components
// pages
import Home from './pages/Home';
import Privacy from './pages/Privacy';
import Contact from './pages/Contact';


const App = () => {

  return (
    <div className="app">
      <Router history={history}>
        <NavBar />
        <Switch>
          <Route exact path="/" render={(props) => <Home {...props} />} />
          <Route path="/privacy" render={(props) => <Privacy {...props} />} />
          <Route path="/contact" render={(props) => <Contact {...props} />} />
        </Switch>
        <Footer />
      </Router>
    </div>
  );
}

export default App;

这是我的index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

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

我觉得React Router应该足够聪明，可以解析一个URL并呈现我需要的实际组件（我的.htaccess文件服务于index.html），并且很可能我丢失了在我的代码中可以完成此操作的东西。我觉得这可能与我的历史对象有关，但我不确定。

任何帮助将不胜感激。

解决方法

因此，我通过修复.htaccess文件来解决此问题。我将提供文件的内容（从基本教程here中获取），然后解释为什么我认为它可以解决我的问题。

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

所以我遇到的错误行为是我的网站将所有端点重新路由到主页。因此，如果我要手动刷新或（手动键入浏览器）www.website.com/about，浏览器会将其发送到首页www.website.com。相反，我希望React能够呈现www.website.com/about

的所有组件

我在旅途中学到的一些知识对于实现我的解决方案至关重要：

www.website.com/about在服务器上不存在。因此，您需要提示服务器知道为服务器请求以下路由的index.html服务：是/，/about还是/anyrandomthing，您的服务器应该知道始终提供index.html文件，而React应该处理其余的文件。就我而言，由于我使用的是服务器，实现该逻辑的文件是.htaccess 。
反应路由器会动态更新浏览器URL，但不会发出服务器请求。因此，当用户单击我主页上的“关于我们”按钮时，它实际上并不是在发出服务器请求，它所要做的只是在适当时提示React代码呈现Route组件，并更新浏览器网址以使其似乎用户正在浏览网页。

我的问题是我的旧.htaccess遇到未知路由，并修复了浏览器URL以引用基准（服务器上不存在/about，因此它将浏览器URL更改为{{ 1}}）。相反，我需要修改我的/文件以为任何路由提供.htaccess并保留该路由，以便React Router可以呈现适当的组件。

基本上：

错误的方法：index.html->将浏览器网址固定为/about，投放/

正确方法：index.html-> ~~将浏览器URL固定为/about~~ （React Router将看到该URL并作出适当响应），投放/

从浏览器URL进行React Router Render

如何解决从浏览器URL进行React Router Render

解决方法

相关推荐