如何為React-Router路由器設置基本名稱

Question

我該如何配置基本名稱，或在url中保留一個路徑，例如localhost:8000/app ，當我必須重定向到另一條路由時，路由器將這個/app標識為url的一部分並且不進行更改，這就是我的組件結構。

import React from 'react';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
<Router history={browserHistory} >
  <Route component={App}>
    <Route path="/" component={Home} />
    <Route path="/login" component={LoginContainer} />
    <Route path="apresentacao">
      <IndexRoute component={NameContainer} />
      <Route path="2" component={HsContainer} />
      <Route path="3" component={McContainer} />
      <Route path="4" component={MpvContainer} />
    </Route>
  </Route>
</Router>

Answer 1

如果您使用的是React Router v4，則可以使用Router組件的basename屬性更改應用程序的基礎。

import React from "react";
import { Router, Route, browserHistory, IndexRoute } from "react-router";

class App extends React.Component {
  render() {
    return (
      <Router history={browserHistory} basename="/app">
        <Route component={App}>
          <Route path="/" component={Home} />
          <Route path="/login" component={LoginContainer} />
          <Route path="apresentacao">
            <IndexRoute component={NameContainer} />
            <Route path="2" component={HsContainer} />
            <Route path="3" component={McContainer} />
            <Route path="4" component={MpvContainer} />
          </Route>
        </Route>
      </Router>
    );
  }
}

如果您使用的是React Router v3，則需要單獨安裝history軟件包並使用useBasename函數。

import React from "react";
import { Router, Route, browserHistory, IndexRoute } from "react-router";
import { useBasename } from 'history'

class App extends React.Component {
  render() {
    return (
      <Router history={useBasename(() => browserHistory)({ basename: '/app' })}>
        <Route component={App}>
          <Route path="/" component={Home} />
          <Route path="/login" component={LoginContainer} />
          <Route path="apresentacao">
            <IndexRoute component={NameContainer} />
            <Route path="2" component={HsContainer} />
            <Route path="3" component={McContainer} />
            <Route path="4" component={MpvContainer} />
          </Route>
        </Route>
      </Router>
    );
  }
}