reactjs：无法使路由器工作答案

【问题标题】：reactjs: not able to make router workreactjs：无法使路由器工作
【发布时间】：2018-09-07 02:17:30
【问题描述】：

我有以下 index.html。我正在尝试使用路由器。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Twitter API</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.2.2/react-router-dom.min.js"></script>
  </head>

  <body>
    <div id="root"></div>

  <script type="text/babel">

    class Module extends React.Component {
      constructor(props) {
          super(props);
      }

      render() {
          return (
            <div>
            <p>This is Module</p>
            </div>

          );
        }
      }

  class Basic extends React.Component {
      constructor(props) {
        super(props);
      }
      render() {
        return (
          <ReactRouterDOM.Router>
            <ReactRouterDOM.Route exact path="/" component={Module} />
          </ReactRouterDOM.Router>
          )
      }
    }

  ReactDOM.render(
      <Basic />,
      document.getElementById('root')
  );
  </script>
  </body>
</html>

我收到以下错误：如何克服这个问题

Uncaught TypeError: Cannot read property 'location' of undefined
    at new n (react-router-dom.min.js:1)
    at react-dom.js:4749
    at measureLifeCyclePerf (react-dom.js:4529)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (react-dom.js:4748)
    at ReactCompositeComponentWrapper._constructComponent (react-dom.js:4734)
    at ReactCompositeComponentWrapper.mountComponent (react-dom.js:4642)
    at Object.mountComponent (react-dom.js:11542)
    at ReactCompositeComponentWrapper.performInitialMount (react-dom.js:4825)
    at ReactCompositeComponentWrapper.mountComponent (react-dom.js:4712)
    at Object.mountComponent (react-dom.js:11542)

【问题讨论】：

stackoverflow.com/questions/42892488/… 阅读该答案。我认为它会帮助您解决问题。
好的。现在我正在使用它：ReactRouterDOM.BrowserRouter。但我目前正在使用localhost/~user/index.html。现在它什么也没显示。
我看不到您为 /user 定义了路由的任何地方，只是根路由“/”。尝试去 localhost:port
我的意思是我的文件 index.html 位于 /home/public_html。我正在使用 apache 网络服务器为页面提供服务。所以localhost/~user/index.html

标签： reactjs react-router-dom

【解决方案1】：

您需要使用BrowserRouter，并且如果您的页面不是从根目录运行，则需要设置basename 属性（并且您想使用/ 路径）

  <ReactRouterDOM.BrowserRouter basename="/~user/">
    <ReactRouterDOM.Route exact path="/" component={Module} />
  </ReactRouterDOM.BrowserRouter>

【讨论】：

现在可以了。但问题是我正在从 apache 网络服务器提供 index.html。那么我该如何结合反应路由器和apache url
@SanthoshYedidi 您需要为此设置basename。更新答案
正如我所提到的，还有许多其他文件（.php 文件）从“/~user/”提供服务，我希望localhost/~user/index.html 成为基础，所有 url 都从那里开始。就像我有那么它应该指向 localhost/~user/index.html/test 我知道 url 看起来很可笑。最好的方法是什么。
@SanthoshYedidi 这就是basename 所做的。它只影响反应BrowserRouter。
那么基本名称应该是“/~user/index.html”