Question

我遇到一个问题，当我启动我的React应用时，我能够导航到所有路线。当我在浏览器中单击刷新按钮时，会出现问题，我收到一条错误消息，指出未找到该路由。

以下是路由的配置方式： Index.js

import SearchByRequestId from '../components/SearchByRequestId';
import ErrorsByDate from '../components/ErrorsByDate';
import PayerProperties from '../components/PayerProperties';
import BucketCreator from '../components/BucketCreator';
import EDI275Component from '../components/EDI275Component';

export const SEARCH_BY_REQUEST_ID = 'SEARCH_BY_REQUEST_ID';
export const ERRORS_BY_DATE = 'ERRORS_BY_DATE';
export const PAYER_PROPERTIES = 'PAYER_PROPERTIES';
export const BUCKET_VIEWER = 'BUCKET_VIEWER';
export const EDI_275_VIEWER = 'EDI_275_VIEWER';
export const DEFAULT_ROUTE_VIEWER = 'DEFAULT_ROUTE_VIEWER';

export const PERMISSIONS = {
  MA_ADMIN: '7462'
};



export const REQUEST_DETAILS_ROUTE = {
  name: SEARCH_BY_REQUEST_ID,
  tabName: 'Search By Request Id',
  pathname: '/search_by_id.html',
  component: SearchByRequestId
};

export const ERRORS_BY_DATE_ROUTE = {
  name: ERRORS_BY_DATE,
  tabName: 'Errors By Date',
  pathname: '/errors_by_date.html',
  component: ErrorsByDate
};

export const PAYER_PROPERTIES_ROUTE = {
  name: PAYER_PROPERTIES,
  tabName: 'Payer Properties',
  pathname: '/payer_properties.html',
  component: PayerProperties
};

export const BUCKET_VIEWER_ROUTE = {
  name: BUCKET_VIEWER,
  tabName: 'Create Bucket JSON',
  pathname: '/bucket_creator.html',
  component: BucketCreator
};

export const EDI_275_ROUTE = {
  name: EDI_275_VIEWER,
  tabName: 'Create EDI 275',
  pathname: '/edi_275.html',
  component: EDI275Component
};

export const ALL_ROUTES = [
  REQUEST_DETAILS_ROUTE,
  ERRORS_BY_DATE_ROUTE,
  PAYER_PROPERTIES_ROUTE,
  BUCKET_VIEWER_ROUTE,
  EDI_275_ROUTE
];

export const getAllPermissions = () => Object.keys(PERMISSIONS).map(key => PERMISSIONS[key]);

Page.js将以上指定的所有路由呈现为选项卡式菜单。这部分的工作原理很像： Page.js

import React, { Fragment, PureComponent, Component } from 'react';
import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { PropTypes } from 'prop-types';
import { push } from 'connected-react-router';
import { Nav, NavItem, NavLink } from 'reactstrap';
import { authorize, notifications } from '../common/hoc';
import Dashboard from './Dashboard';

import { getAllPermissions, ALL_ROUTES } from '../routes';

class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { routeInfos, push, currentPathname } = this.props;
    const toPath = routeInfos && routeInfos.length > 0 ? routeInfos[0].pathname : '/error.html';
    const tabs = routeInfos.map(routeInfo => (
      <NavItem key={routeInfo.pathname}>
        <NavLink
          href="#"
          active={routeInfo.pathname === currentPathname}
          onClick={evt => {
            push(routeInfo.pathname);
            evt.preventDefault();
            evt.stopPropagation();
          }}
        >
          {routeInfo.tabName}
        </NavLink>
      </NavItem>
    ));
    const routes = routeInfos.map(routeInfo => (
      <Route key={routeInfo.pathname} exact path={routeInfo.pathname} component={routeInfo.component} />
    ));

    return (
      <Fragment>
        {toPath !== '/error.html' && <Dashboard />}
        <Nav className="mt--1 mb-3" tabs>
          {tabs}
        </Nav>
        <Switch>
          {routes}
          {toPath !== '/error.html' && <Redirect from="/" to={toPath} />}
          <Route component={() => <div>Error Loading page</div>} />
          {/* <Route exact path="/" component={<Dashboard />} /> */}
        </Switch>
      </Fragment>
    );
  }
}

App.propTypes = {
  currentPathname: PropTypes.string,
  routeInfos: PropTypes.array,
  push: PropTypes.func
};

const mapStateToProps = state => {
  const {
    router: {
      location: { pathname: currentPathname }
    }
  } = state.toJS();
  return { routeInfos: ALL_ROUTES, currentPathname };
};

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      push
    },
    dispatch
  );

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(notifications()(authorize(getAllPermissions)(App)))
);

页面最初呈现以下URL时，http://localhost:3000/search_by_id.html有效。当我在浏览器中单击相同URL的刷新按钮时，收到以下错误消息：

无法获取/search_by_id.html

Answer 1

您需要配置服务器以正确服务于前端路由器创建的路由。

从Create React App文档Serving Apps with Client-Side Routing中查看此文章。即使您没有使用Create React App，它也可能有助于解释如何配置资产服务器。它们涵盖了很多服务器配置，但是如果您的服务器不在列表中，则可以尝试搜索“前端路由器配置”。

找不到路线

1 个答案: