如何为 react-router 路由器设置基本名称答案

【问题标题】：How to set a basename for react-router Router如何为 react-router 路由器设置基本名称
【发布时间】：2018-08-01 17:45:55
【问题描述】：

如何配置基本名称，或在 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>

【问题讨论】：

标签： javascript reactjs react-router

【解决方案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>
    );
  }
}

【讨论】：

我尝试了解决方案但仍然没有用，url 仍然localhost:8000 并且没有任何改变，顺便说一下我使用的是 redux，我不知道这对解决方案是否重要。
@LeonardoAlves 更仔细地查看您问题中的代码，您似乎正在使用反应路由器 v3。对吗？
我试过这个解决方案，但它给了我这个错误Uncaught TypeError: (0 , _history.useBasename) is not a function，我正在使用react-router v3.0.0 和history v4.7.2，对吗？
我尝试使用 history v3，现在错误消失了，但仍然无法正常工作。