如何在 React Shepherd 中访问浏览器历史记录

我正在尝试使用React Shepherd为我的应用程序创建演练。


我似乎找不到任何解释如何在游览中切换路线的内容。window.location.replace = "/someurl" 刷新页面并完全终止游览。我正在努力实现这一目标


历史.js


import { createBrowserHistory } from "history";


const history = createBrowserHistory();


export default history;

步骤.js


import hist from "./History";


const Steps = [

    {

    //...

    when: {

      hide: () => {

          hist.push("/someurl");

      },

    },

  },

//...

]

export default Steps;

应用程序.js


import React from "react";

import { Router } from "react-router";

import { Route } from "react-router-dom";

//...

import Steps from "./Steps";

import hist from "./History";

import "shepherd.js/dist/css/shepherd.css";


const tourOptions = {

  defaultStepOptions: {

    cancelIcon: {

      enabled: true,

    },

    classes: "shepherd-theme-custom",

  },

  useModalOverlay: true,

};


const App = () => {


  return (

      <Router history={hist}>

         <Route exact path="/signin" component={SignIn} />

         <ShepherdTour steps={Steps} tourOptions={tourOptions}>

            <PrivateRoute exact path="/*" component={Main} />

          </ShepherdTour>

      </Router>

  );

};


export default App;

调用steps的hide函数时,url路径切换了,页面没有渲染。我想知道我是否错误地使用了 react-router 或者是否有不同的方法来解决这个问题?


慕神8447489
浏览 118回答 1
1回答

红颜莎娜

所以这实际上与根本无关React Shepherd,这纯粹是 React Router 的问题。我错误地嵌套了两个BrowserRouter',因为它也意外地包含在我的Main组件中。删除后,应用程序可以使用自定义历史文件导航。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript