React Router v4 基本名称和自定义历史记录

2024-04-18

我想为我的路由分配一个基本名称,我可以使用 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">

You can https://reacttraining.com/react-router/web/api/BrowserRouter:

<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Router v4 基本名称和自定义历史记录 的相关文章

随机推荐