程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了React Router v4 baseName和自定义历史记录大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决React Router v4 basename和自定义历史记录?

开发过程中遇到React Router v4 basename和自定义历史记录的问题如何解决?下面主要结合日常开发的经验,给出你关于React Router v4 basename和自定义历史记录的解决方法建议,希望对你解决React Router v4 basename和自定义历史记录有所启发或帮助;

您可以:

<browserRouter basename="/your/app">
  <App/>
</browserRouter>

或直接配置history对象:

import { Router } from 'react-router';
import createbrowserHistory from 'history/createbrowserHistory';

const history = createbrowserHistory({ basename: '/your/app' });

<Router history={history}>
  <App />
</Router>

解决方法

我想为我的路线分配一个基本名称,我可以使用BrowserRouter为其指定一个名称。

但是,我也想指定一个自定义历史记录,以便可以以编程方式导航我的用户。我可以用路由器做。

但是,我不能两者都做。是否可以扩展其中一个路由器以支持此功能或将功能环绕它以添加此功能?

我当前的设置是-

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

import createHistory from './history';

import Navigation from './components/navigation/Navigation';

import PrivateRoute from './components/private-route/PrivateRoute';

import Home from './containers/home/Home';
import PageTwo from './components/pageTwo/PageTwo';
import CallBACk from './components/callBACk/CallBACk';
import Login from './components/login/Login';

export default () => (
  <Router history={CreateHistory}>
    <div>
      <Navigation />
      <Switch>
        <Route path="/callBACk" component={CallBACk} />
        <Route path="/login" component={Login} />
        <PrivateRoute path="/" exact component={HomE} />
        <PrivateRoute path="/page-two" component={PageTwo} />
        <Redirect to="/" />
      </Switch>
    </div>
  </Router>
);

但是我很想实现以下目标:

<Router history={CreateHistory} basename="foo">

大佬总结

以上是大佬教程为你收集整理的React Router v4 baseName和自定义历史记录全部内容,希望文章能够帮你解决React Router v4 baseName和自定义历史记录所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。