Question

当我单击路线链接时，一切正常，图像在DOM中具有正确的路径，并且图像被加载。

但是，如果我在地址栏中输入网址（包括路由后缀），例如在example.com/services中，服务路由页面上的图像路径会更改为包含“ / services”前缀，因此在GET请求中产生404。如果然后我直接单击路由链接，则DOM更新，并设置了正确的路径并加载了图像。

在服务页面上：

<li>
    <Link exact to="/services">
        Services{" "}
    </Link>

我的App.js

const App = () => (
    <Router>
        <div>
            <Routes />
        </div>
    </Router>
);

Answer 1

这是因为处理服务器端和客户端路由的方式不同。当您单击UI内的链接（例如列表元素给出的/services链接）时， JavaScript会运行，它会操纵地址栏中的URL，而不会导致页面刷新。然后， React Router在客户端执行页面转换，而不是向服务器发送http请求。但是，当您直接在浏览器的地址栏中输入url（例如http://localhost:3000/services）时，浏览器会向服务器上的/services路由发出 http请求 。但是，尚未在服务器上设置您的/services路由来处理这样的http请求，因此会导致相应的404错误。这就是为什么散列路由被发明出来，以避免对服务器发出http请求的原因，因为大多数服务器不理解诸如/#/services之类的散列路由，因为通常将服务器路由配置为不包含散列。

因此，如果希望/services URL在服务器端和客户端都能正常工作，则需要在服务器和客户端代码上都设置/services路由。在您的服务器上，我还建议创建一个错误处理程序以捕获所有404错误，并使此路由将用户重定向到您的首页或索引页。这将使用户避免从您的服务器生成默认的404页面。通常，良好的用户界面体验将使用户通过单击链接导航到不同的页面，而不是手动输入URL，因为通常期望某人记住确切的路线是不合理的。

希望这有助于澄清问题！

Answer 2

请在图像源中插入/前缀。它始终确保映像指向域的根。示例：https://example.com或https://example.com/contact

<img src="/static/my-banner.png" />

您的图像源始终为https://example.com/static/my-banner.png

React-直接输入地址栏时图像路径变为相对路径

2 个答案: