javascript - 嵌套路由在 react-router-dom 中不起作用

Question

我已经使用 react-router-dom 配置了我的路由，并用<HashRouter/>. 在我的路线中，我定义了多条路线，并且有一些奇怪的问题可能是我无法解决的，即有路径/accounts可以正常工作，但是如果我使用/accounts/manage_account，/accounts/create/或者/accounts/:uniqueId作为孩子定义路线，那么路线不会呈现适当的组件。我被困在这里的实际问题是什么。我会感谢任何人在这方面的帮助

*routes.js*
import React from 'react'
import {Router, Switch, Route, Redirect} from "react-router-dom";
import history from 'routers/history'
import UISidebarTabsUtil from 'utils/ui_sidebar_tabs_util';
import {UI_CONSTANTS} from 'utils/globals';
import {Authorization, requireAuth} from 'auth/authorization';

import CDashboard from 'containers/dashboard/c_dashboard';
import CResourceAccessDetail from 'containers/dashboard/c_resource_detail';

//Discovery
import CScanRequest from 'containers/configuration/application/c_scan_request';

//Data-Inventory
import CDataClassification from 'containers/discovery/c_data_classification';
// import CDataDetail from 'containers/discovery/c_data_detail';
import CAccessDetail from 'containers/dashboard/c_access_detail';

import CAccounts from 'containers/account/c_accounts';
import CAccountForm from 'containers/account/c_account_form';
import CManageTenant from 'containers/account/c_manage_tenant';

import CBillingDashboard from 'containers/billing_usage/c_billing_usage'

import CAssumeRole from 'containers/assume_role/c_assume_role';

import CScheme from 'containers/crypto/scheme/c_scheme';

import CReporting from 'containers/reports/c_reporting';
import CSavedReportListing from 'containers/reports/c_saved_report_listing';
// import COfflineReports from 'containers/reports/c_offline_reports';

import CAuditsMain from 'containers/audits/c_audits_main';

import CUserManagementMain from 'containers/user_management/c_user_management_main';
import CLDapRoleMapping from 'containers/user_management/c_ldap_role_mapping';

import CPageNotFound from 'containers/c_page_not_found';
import CForbiddenError from 'containers/c_forbidden_error';

import CApiKey from 'containers/api_key/c_api_key';
import CSystemApplications from 'containers/data_source_registration/c_system_application'
import CReportStatistics from 'containers/c_report_statistics';

// cloud acccess manager
// import CLaunchPad from 'containers/cloud_manager/c_launch_pad';
import CAWSCLI from 'containers/cloud_manager/c_aws_cli';
import CCloudTokens from 'containers/cloud_manager/c_cloud_tokens';


//<Route path="tokens" name="JWT Tokens" component={Authorization(CUserTokens, ""/*[UI_CONSTANTS.SETTINGS, UI_CONSTANTS.TOKENS]*/, () => !UISidebarTabsUtil.isPortalUserTokenEnable())} />
const Routes = () => (
  <div>
    <Switch>
        <Redirect exact path="/" name="Home" to={"account"} />
        <Route exact path="/" component={Authorization(CDashboard, [UI_CONSTANTS.DASHBOARD])} />
        <Route exact path="/account" render = {({...props}) => (
          <Switch>
            <Route path={`${props.match.path}`} name="Account" component={Authorization(CAccounts, [UI_CONSTANTS.SETTINGS, UI_CONSTANTS.ACCOUNTS])} />
            <Route path={`${props.match.path}/create`} name="Create Account" component={Authorization(CAccountForm, [UI_CONSTANTS.SETTINGS, UI_CONSTANTS.ACCOUNTS])} />
            <Route path={`${props.match.path}/:accountUniqueId`} getDisplayName={() => "Account Info"} component={Authorization(CAccountForm, [UI_CONSTANTS.SETTINGS, UI_CONSTANTS.ACCOUNTS])} />
            <Route path={`${props.match.path}/manage`} name="Manage Account" component={Authorization(CManageTenant, [UI_CONSTANTS.DASHBOARD])} />
          </Switch>
        )}>
        </Route>

        <Route path="/api_key" getDisplayName={() => "Api Key"} component={Authorization(CApiKey, [UI_CONSTANTS.SETTINGS, UI_CONSTANTS.API_KEY])} />
        <Route path="/dashboard" name="Dashboard" component={Authorization(CDashboard, [UI_CONSTANTS.DASHBOARD])} />
    </Switch>
  </div>
)

export {
    Routes
}


********************root.js*********************
import {hot} from 'react-hot-loader';
import React, {Component} from 'react';
import {reaction} from 'mobx';
import {Provider} from 'mobx-react'
import { withRouter } from "react-router";
// import {Router, hashHistory} from 'react-router';
import NotificationSystem from 'react-notification-system';
// import Promise from 'bluebird';
import DevTools from 'mobx-react-devtools';
import ReactGA from 'react-ga';


import {Confirm} from 'lib/fs_modal';
import {Routes} from 'routers/routes';
import f from 'utils/f';
import UiState from 'data/ui_state'
import {configProperties} from 'utils/config_properties';
import * as buildVersion from '../../privacera_version';
// import "pdfmake/build/pdfmake";
// import PDFUtil from 'utils/pdf_util';
import 'lib/timezone_worldmap/timezone_worldmap';

/*if (PDFUtil && PDFUtil.loadFonts) {
  PDFUtil.loadFonts();
}*/

class Root extends Component {
  constructor(props) {
    super(props);
    UiState.setBuildVersion(buildVersion);
    reaction(
      () => UiState.refreshProps,
      () => {
        if (UiState.refreshProps) {
          this.refresh();
        }
      }
    )
    reaction(
      () => UiState.switchRole,
      () => {
        if (UiState.switchRole) {
          this.setState({loaded: false});
          // this.fetch();
          this.refresh();
        }
      }
    )
  }
  state = {
    loaded: false
  }
  async fetch() {
    try {
      const load = await UiState.fetch();
      this.setState({loaded: true});
      this.loadFeedBackTool();
      this.loadInstana();
      this.initGA(load);
      UiState.setSwitchRoleProps(false);
    } catch(e) {
      console.log(e);
      UiState.logout();
    }
  }
  async refresh() {
    const { history: hashHistory } = this.props
    this.setState({loaded: false});
    try {
      const load = await UiState.refreshProperties();
      hashHistory.push('/')
      this.setState({loaded: true});
      UiState.setRefreshProps(false);
      UiState.setSwitchRoleProps(false);
    } catch(e) {
      this.setState({loaded: true});
      UiState.setRefreshProps(false);
      UiState.setSwitchRoleProps(false);
    }
  }

  componentDidMount() {
    this.fetch();
    f.setNotificationSystem(this.refs.notificationSystem);
    f.setConfirmBox(this.refs.confirm);
  }

  initGA = (userData={}) => {
    const { history: hashHistory } = this.props
    let id = configProperties.getGoogleAnalyticsId();
    if (!id) {
      return;
    }
    ReactGA.initialize(id);
    hashHistory.listen(location => {
      const {pathname} = location;
      ReactGA.set({
        page: pathname,
        userId : userData.accountUniqueId,
        location : `${window.location.origin}${pathname}`
      });
      ReactGA.pageview(pathname);
    });
  }

  loadFeedBackTool = () => {
    // UiState.userAccountID()
    
    /*
      window.onUsersnapCXLoad = function(api) {
      api.init();
      }
      var script = document.createElement('script');
      script.async = 1;
      script.src = 'https://widget.usersnap.com/load/52b2b363-f383-4eea-916d-9e8212722b73?onload=onUsersnapCXLoad';
      document.getElementsByTagName('head')[0].appendChild(script);
    */
    let feedBackApiKey = UiState.getFeedBackApiKey();
    if (!feedBackApiKey) {
      return;
    }
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.src = `//api.usersnap.com/load/${feedBackApiKey}.js`;
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  }
  loadInstana = () => {
    let reportingUrl = configProperties.getInstanaReportingUrl();
    let key = configProperties.getInstanaKey();

    if (!reportingUrl && !key) {
      return;
    }

    var s = document.createElement("script");
    s.type = "text/javascript";
    s.defer
    s.crossorigin = "anonymous"
    s.src = `https://eum.instana.io/eum.min.js`;
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);

    (function(s, t, a, n) {
      s[t] || (s[t] = a, n = s[a] = function() {
          n.q.push(arguments)
        },
        n.q = [], n.v = 2, n.l = 1 * new Date)
    })(window, "InstanaEumObject", "ineum");

    ineum('reportingUrl', reportingUrl);
    ineum('key', key);
    ineum('trackSessions');
  }

  render() {
    const {state} = this;
    const {stores={}} = this.props;
    return (
      <Provider { ...stores }>
        <div>
          {/* state.loaded &&
            <Router history={hashHistory} routes={routes} onUpdate={() => window.scrollTo(0, 0)} />
          */}
          { state.loaded && <Routes /> }
          <NotificationSystem ref="notificationSystem" />
          <Confirm ref="confirm" />
          {/* <DevTools /> */}
        </div>  
      </Provider>
    )
  }
}

export default hot(module)(withRouter(Root));

************main.js**********
import React, {Component} from 'react'
import {render} from 'react-dom';
import { HashRouter } from 'react-router-dom';

import 'import_common_files';
import routes from 'routers/routes';
import stores from 'data/stores/all_stores';
import Root from 'root';

render(
<HashRouter>
  <Root stores={stores} routes={routes} />
</HashRouter>
, document.getElementById('main_region'));

提前致谢。

标签： javascriptreactjsreact-routerreact-router-dommobx