无法读取属性历史记录，因为它未定义，但它是

Question

我收到错误无法读取属性历史记录，但我定义了它。

当我在客户端文件夹的 main.jsx 中使用它时，它使用了这项工作，但现在它停止工作了。

应用程序文件在我的导入文件夹中。

import { Router, Route, Switch, Redirect } from "react-router-dom";
import createBrowserHistory from "history/createBrowserHistory";

const history = createBrowserHistory();

// App component - represents the whole app
export class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="container">

        <Router history={history}>
          <Switch>
            <Route path="/" exact component={Home} />
            <Route
              path="/dashboard"
              render={() =>
                this.props.currentUser ? <Dashboard /> : <NoPermission />}
            />
            <Route path="/test" component={Test} />
            <Route component={NotFound} />
          </Switch>
        </Router>
      </div>
    );
  }
}

更多信息：

从“history/createBrowserHistory”导入createBrowserHistory；

在该文件中，createBrowserHistory 是默认导出。

export.default = createBrowserHistory;

当尝试 BrowserRouter 而不是路由器并删除历史 const 和 props 时，我在控制台中收到以下错误。

modules.js:26944 Uncaught TypeError: Cannot read property 'history' of undefined
    at Link.render (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:26944)
    at modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:18399
    at measureLifeCyclePerf (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:17679)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:18398)
    at ReactCompositeComponentWrapper._renderValidatedComponent (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:18425)
    at ReactCompositeComponentWrapper.performInitialMount (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:17965)
    at ReactCompositeComponentWrapper.mountComponent (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:17861)
    at Object.mountComponent (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:10622)
    at ReactDOMComponent.mountChildren (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:16977)
    at ReactDOMComponent._createInitialChildren (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:14176)

在我的 main.jsx 中使用 BrowserRouter 时，我可以让它工作。我可以更改 URL，但不会呈现新视图。所以我认为历史还是有问题的。在这种情况下，我没有定义它，但我没有收到任何错误。有什么办法可以检查或解决这个问题？

import React from "react";
import { Meteor } from "meteor/meteor";
import { render } from "react-dom";
import "../imports/startup/accounts-config.js";

import App from "../imports/layouts/App.jsx";
import Test from "../imports/Test.jsx";
import { BrowserRouter } from "react-router-dom";

Meteor.startup(() => {
  render(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
    document.getElementById("render-target")
  );
});

进一步了解 Kyle 的回答，我将 withrouter 添加到我的测试组件中。

import React, { Component } from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";

class Test extends Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  };

  render() {
    const { match, location, history } = this.props;

    return (
      <div>
        <p>This is a test</p>
        <p>
          You are now at {location.pathname}
        </p>
      </div>
    );
  }
}

export default withRouter(Test);

我正在使用 NavLinks 在我的导航栏组件中链接到此路线。

   <NavLink to="/test" activeClassName="active">
          Test
        </NavLink>

但是，单击这些链接不会呈现测试页面。 （网址栏中的地址确实发生了变化）。当我在浏览器中按刷新时，页面加载并且 location.pathname 显示正确的位置。

如果我删除 withrouter，功能是一样的。

我通过不使用组件来嵌套路由器来让它工作。 如果有人能解释一下为什么我将不胜感激。

import Navbar from "../components/Navbar.jsx";
import AccountsUIWrapper from "../components/AccountsUIWrapper.jsx";

//import pages
import Home from "../pages/Home.jsx";
import Dashboard from "../pages/Dashboard.jsx";
import Test from "../Test.jsx";
import NotFound from "../pages/NotFound.jsx";
import NoPermission from "../pages/NoPermission.jsx";

let currentUser = Meteor.user();

const App = () =>
  <Router>
    <div>
      <Navbar currentUser={currentUser} />

      <AccountsUIWrapper />

      <p>
        {currentUser ? currentUser._id : "current user id not found"}
      </p>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route
          path="/dashboard"
          render={() => (currentUser ? <Dashboard /> : <NoPermission />)}
        />
        <Route path="/test" component={Test} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </Router>;

export default App;

Answer 1

React Router 4 已经融入了历史。您可以从BrowserRouter、HashRouter 和MemoryRouter 的文档中看到history 没有参数。

如果您想访问 React Router v4 中的历史记录，您应该在您希望访问它的组件上使用 withRouter HoC。withRouter 将使 ({match, history, location }) 在它包装的任何组件中可用.

从这行代码可以看出：var _createBrowserHistory = require('history/createBrowserHistory'); 是BrowserRouter.js 和HashRouter.js 历史记录中的第13 行已经包含在内。它也包含在MemoryRouter.js的第9行的内存路由器中。

尝试将顶部的导入更改为import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";，然后从<Router /> 中删除history={ history }。

编辑：请查看 React Router 4 的文档。这是basic example。

这是一个代码帖子，以防链接失效。

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic}/>
    <Route exact path={match.url} render={() => (
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

export default BasicExample