时间戳

首页 > 解决方案 > React SPA 在刷新时找不到页面 - 从导航栏中选择时加载正常

.net - React SPA 在刷新时找不到页面 - 从导航栏中选择时加载正常

问题描述

我有一个应用程序，我在前端使用 React/Redux 编写，后端使用 .NET Core 2.2。这是您典型的 SPA 应用程序，我相信我很久以前就开始使用 CreateReactApp 了。我之前已经设置了路由正常工作的页面，当我在键盘上按 F5 或输入应该导航到页面的 URL 时，一切都会按预期加载。您将在下面的示例中看到这一点，AuditLog 和 AddLicenses 页面在刷新或我手动输入 URL 时都正确加载（开发 URL 为 ）。

我正在我的应用程序上开发一个名为 Copy 的新功能，并且这个新功能应该有自己的 URL 可解析为 ( http://localhost:8080/Copy )。但是，由于某种原因，当我按 F5 并收到 405 错误时，URL 不会实际加载页面。如果我手动将 URL 复制并粘贴到新选项卡中，情况也是如此。但是，如果我从导航栏中选择它，它会加载得很好。这是我在导航栏中选择它时的页面（我删除了一些信息，因为我不确定我可以共享多少应用程序）： FromNavbar

这是我从导航栏导航到该页面后按 F5 时收到的错误： On F5

这是我的导航菜单的样子：

import * as React from 'react';
import { Glyphicon, Nav, Navbar, NavItem } from 'react-bootstrap';
import { Container } from 'react-bootstrap/lib/Tab';
import { LinkContainer } from 'react-router-bootstrap';
import { Link } from 'react-router-dom';
import './NavMenu.css';


export default (props: any) => (
  <Container>
  <Navbar inverse={true} fixedTop={true} fluid={true} collapseOnSelect={true}>
    <Navbar.Header>
      <Navbar.Brand>
        <Link to={'/'}>App Name</Link>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
        <Nav>
        <LinkContainer to={'/Home'}>
          <NavItem>
              <Glyphicon glyph='home' /> Home
          </NavItem>
        </LinkContainer> 
        <LinkContainer to={'/AuditLog'}>
            <NavItem>
                <Glyphicon glyph='th-list' /> Audit Log
            </NavItem>
        </LinkContainer>
        <LinkContainer to={'/Copy'}>
            <NavItem>
              <Glyphicon glyph='glyphicon glyphicon-link' /> Copy
            </NavItem>
        </LinkContainer>
        {/* <LinkContainer to={'/AddLicenses'}>
             <NavItem>
                <Glyphicon glyph='apple' /> Add Licenses
            </NavItem>
        </LinkContainer>    */}
      </Nav>
    </Navbar.Collapse>
  </Navbar>
  </Container>
);

另外，这是我的 App.tsx 文件：

import { ImplicitCallback, Security } from '@okta/okta-react';
import * as React from 'react';
import { Route } from 'react-router';
import Layout from './components/Layout';
import AddLicenses from './components/Pages/AddLicenses';
import AuditLog from './components/Pages/AuditLog';
import Copy from './components/Pages/Copy';
import Home from './components/Pages/Home';

// Todo: Move OKTA configuration to its own file -- can be shared between client and server.
export const config = {
    client_id: 'REDACTED',
    issuer: 'REDACTED',
    redirect_uri: window.location.origin + '/implicit/callback'
  }

export default () => (
    <Layout>
        <Security issuer={config.issuer}
                  client_id={config.client_id}
                  redirect_uri={config.redirect_uri}
        >
            <Route path='/' exact={true} component={Home}/>
            <Route path='/Home' exact={true} component={Home}/>
            <Route path='/AddLicenses' component={AddLicenses} />
            <Route path='/AuditLog' component={AuditLog} />
            <Route path='/Copy' component={Copy} />
            <Route path='/implicit/callback' component={ImplicitCallback}/>
        </Security>
    </Layout>
);

如果有更多信息可以提供澄清，我将很高兴这样做。我在这个问题上停留的时间太长了，而且我是唯一一个在这个应用程序上工作的开发人员，所以任何帮助都将不胜感激！

标签： .nettypescriptreact-reduxsingle-page-application

解决方案

我不知道为什么这个问题会以这种方式解决，但我至少找到了解决这个问题的方法。

我知道当我在服务器上设置路由时，无论页面是否存在，这都会路由任何请求。如果该页面存在，它会将您路由到该页面。如果不存在，则默认为 index.tsx。因此，我可以输入除副本之外的任何 URL 的事实意味着具有该特定路由的某些内容会导致问题。我做了一个简单的测试并更改了一个值：

<Route path='/Copy' component={Copy} />

我把它改成了

<Route path='/Copy2' component={Copy} />

通过更改为 /Copy2，该路由现在可以工作了。我不知道为什么。这条路线正在由 reactRouter 处理，因此其中的某些内容与我的路线不兼容。所以，我不会把它变成一个探索，而是在它的末尾保留一个 2 的路线。

推荐阅读