锚链接在本地工作，但在部署时不工作（React）

Question

我有一个单页反应应用程序，我有一个带有锚链接的菜单，如下所示：

<a href="/App#story" class="font-medium text-gray-100 hover:text-red-600">Story</a>

在目标 div 中，我有这样的：

<div id="story" class="py-16 xl:py-36 px-4 sm:px-6 lg:px-8 bg-black overflow-hidden">

当我使用npm start 在本地运行页面时，锚链接按预期工作。当我将它部署到网络时，链接给了我一个 404。

为什么会这样？

编辑： 我阅读了react-router-dom 并尝试实现它，但我遇到了奇怪的行为。

1. 我在 App.js 的顶部导入了这个：

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

1. 我将第一个 App() 函数的输入内容包装在 <Router></Router> 中。

2. 然后在 App() 部分中，我设置了这个：

        <Switch>
          <Route path="/about">
            <About />
          </Route>
        </Switch>

4. 我的 About 链接设置如下：

<a href="/about" class="text-base text-gray-300 hover:text-white">
                          About
                        </a>

5. 然后在 App.js 文档的最底部， 下方，我有这个：

function About() {
  return ( 
  <><h2>About</h2>
  <br />
  <p>Test</p></>
  );
}

但是，当我单击“关于”链接时，它会重新呈现整个主页以及底部的“关于测试”文本。

我需要做什么才能将其呈现为一个全新的页面？

Answer 1

据我所知，您不能在反应中使用<a> 标签进行内部导航。我不知道为什么它在本地对你有用。

使用 react 创建单页应用程序 (SPA)，您有 1 个可在公共文件夹中找到的 html 页面。如果您使用create-react-app 创建了应用程序，您将在其中看到<div id=root> </div> 之类的元素。这是目标渲染位置，您将通过在与页面交互时动态更改其中的 html 来渲染整个应用程序。

然而，当你通常点击<a>标签时，我们通常会被带到不同的html页面。在这里，我假设服务器正在尝试从 public/App 文件夹中检索 App.html 页面或 index.html 页面。

React 通常不带有内置的路由功能/组件。它留给用户实施。因此，用户通常会使用 react-router 和 react-router-dom/native（取决于 react 或 react native）之类的包来获得这些功能。

更新问题的答案

将您的<a> 标签更改为<Links>，如下所示

<Link to='/about' className='tailwind_classes'>About</Link>

<Link> 标签用于在使用 react-router-dom 进行导航时替换 <a> 标签。

当您单击它时，您的<Router> 会收到通知，并让<Switch> 确定要呈现哪个<Route>

更新

好吧，假设您有一个链接所在的标题，我们有 2 个组件 <Home> 和 <About>

那么这就是你的<App> 的样子

return(
  <Router>
    {/* The header can be it's own component*/}
    <header>
     <Link to='/home' className='tailwind_classes'>Home</Link>
     <Link to='/about' className='tailwind_classes'>About</Link>
    </header>
    <Switch>
     {/* exact makes sure path has to be exactly '/' */}
     <Route exact path="/">
       <Home />
     </Route>
     <Route path="/about">
       <About />
     </Route>
    </Switch>
  <Router>
)

您显然可以直接在<Route>s 内编写<Home> 和<About> 组件的标记，但不建议这样做。 header 也可以是它自己的组件，并且由于它在 switch 之外，它将始终留在屏幕上，使其成为一种全局性的东西。

Link 的 to 属性必须匹配其中一个 Route 的 path 属性

基本上，当您单击链接时，网址会发生变化。通知路由器，然后谁将新的 url 传递给 Switch，然后 Switch 就像一个 switch case 语句来匹配 url 并在删除/卸载之前存在的内容后在匹配的 Route 内渲染/安装 JSX。

阅读react-router-dom documentation 以获得进一步说明