首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >未找到路由

未找到路由
EN

Stack Overflow用户
提问于 2019-05-21 03:01:01
回答 1查看 271关注 0票数 0

我有一个问题,当我启动我的react应用程序时,我能够导航到所有路线。当我点击浏览器中的刷新按钮时,问题就出现了,我收到了一条错误消息,指出找不到路由。

以下是这些路由的配置方式: Index.js

代码语言:javascript
复制
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

代码语言:javascript
复制
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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-21 03:09:57

您需要配置您的服务器以正确地为前端路由器创建的路由提供服务。

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56226704

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档