从MemoryRouter结构中导航到新URL

时间:2019-09-18 16:55:23

标签: reactjs react-redux react-router react-router-dom react-router-redux

用户完成预订过程并导航至已确认的详细信息视图。我需要更改网址。实践证明,这很难解决,因为通过既无法读取也无法写入URL的MemoryRouter完成路由。我需要分解其中一个视图,并让浏览器导航到这个新视图。

我尝试从一个路由器中断开并创建第二个路由器,该路由器将根据原始URL返回,然后尝试了非常hacking的window.location并将URL定向到新路由器。

import React from 'react';
import { MemoryRouter, Route, Switch } from 'react-router-dom';

import {
  Page,
  StartScreen,
  StoreSearch,
  ServiceSelector,
  StoreSelector,
  OptionSelector,
  AppointmentForm,
  AppointmentDetails,
  ConfirmationScreen,
  ErrorScreen,
} from 'components';
import { WithPageTitle, ScrollToTop } from 'containers';
import { services } from 'utilities';

const NewAppRouter = () => {
  return (
    <MemoryRouter>
      <ScrollToTop>
        <Switch>
          <Route exact path="/" component={StartScreen} />
          <WithPageTitle>
            {pageTitle => (
              <Page pageTitle={pageTitle}>
                <Route path="/zip" component={StoreSearch} />
                <Route path="/services" component={() => ServiceSelector({
                  services: services.services,
                  withBackButton: true,
                  backTo: "/zip"
                })} />
                <Route path="/stores" component={StoreSelector} />
                <Route path="/options" component={OptionSelector} />
                <Route path="/form" component={AppointmentForm} />
                <Route path="/details" component={AppointmentDetails} />
                {/* <Route path="/confirmation" component={ConfirmationScreen} /> */}
                <Route path="/error" component={ErrorScreen} />
              </Page>
            )}
          </WithPageTitle>
        </Switch>
      </ScrollToTop>
    </MemoryRouter>
    )
}


const AppRouter = () => {
    if(window.location.href="http://localhost:9998"){
      return (
        <NewAppRouter />
      )
    } else if (window.location.href="http://localhost:9998/confirmation") {
      return (
        <ConfirmRouter />
      )
    } else {
      return console.error('Route Not Found')
    }
}


export default AppRouter;

0 个答案:

没有答案