web-dev-qa-db-ja.com

React Router v4 baseName and custom history

ルートにベース名を割り当てたいのですが、これはBrowserRouterでできます。

ただし、プログラムでユーザーをナビゲートできるように、カスタム履歴も指定したいと思います。ルーターでできること。

ただし、両方を行うことはできません。ルーターの1つを拡張してこれをサポートするか、関数をラップしてこれを追加することはできますか？

私の現在のセットアップはこれです-

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">
reactjsreact-routerreact-redux
10
Harry Blue

できる ：

<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>
27
Robert Farley