反應路由器 - 未定義的歷史記錄

Question

我試圖使用1.0.0-rc1 react-router和歷史2.0.0-rc1按下按鈕后手動瀏覽網站。 不幸的是，按下按鈕后我得到：

無法讀取未定義的屬性'pushState'

我的路由器代碼：

import React from 'react';
import { Router, Route, Link, browserHistory } from 'react-router'
import AppContainer from './components/AppContainer.jsx';
import MyTab from './components/test/MyTab.jsx';
import MainTab from './components/test/MainTab.jsx';


var routes = (
    <Route component={AppContainer} >
        <Route name="maintab" path="/" component={MainTab} />
        <Route name="mytab" path="/mytab" component={MyTab} />
    </Route>
);

React.render(<Router history={browserHistory}>{routes}</Router>, document.getElementById('main'));

導航按鈕在MyTab上，它嘗試導航到MainTab：

import React from 'react';
import 'datejs';
import History from "history";
export default React.createClass({

    mixins: [ History ],

    onChange(state) {
        this.setState(state);
    },

    handleClick() {
        this.history.pushState(null, `/`)
    },

    render() {
        return (
            <div className='container-fluid' >
                <button type="button" onClick={this.handleClick.bind(this)}>TEST</button>
            </div>

        );
    }
});

當我使用this.props.history歷史時一切正常。 這段代碼有什么問題？

編輯。

添加以下內容后：

const history = createBrowserHistory();

React.render(<Router history={history}>{routes}</Router>, document.getElementById('main'));

我嘗試訪問我的應用程序。 之前（沒有history = {history}），我剛剛訪問了localhost:8080/testapp ，一切正常 - 我的靜態資源被生成到dist/testapp目錄中。 現在在這個URL下我得到：

位置“/ testapp /”與任何資源都不匹配

我嘗試以下列方式使用useBasename函數：

    import { useBasename } from 'history'
    const history = useBasename(createBrowserHistory)({
    basename: '/testapp'
});

React.render(<Router history={history}>{routes}</Router>, document.getElementById('main'));

應用程序又回來了，但我又得到了錯誤

無法讀取未定義的屬性'pushState'

在通話中：

 handleClick() { this.history.pushState(null, `/mytab`) }, 

我認為這可能是因為我的gulp連接任務，所以我添加了history-api-fallback配置：

settings: {
      root: './dist/',
      host: 'localhost',
      port: 8080,
      livereload: {
        port: 35929
      },
      middleware: function(connect, opt){
        return [historyApiFallback({})];
      }
    }

但是在添加中間件之后我訪問網站后得到的是：

不能獲取 /

Answer 1

從“react-router”：“^ 4.1.1”開始 ，您可以嘗試以下方法：

使用' this.props.history.push（'/ new-route'） '。 這是一個詳細的例子

1：Index.js

 import { BrowserRouter, Route, Switch } from 'react-router-dom'; 
 //more imports here
    ReactDOM.render(
      <div>
        <BrowserRouter>
           <Switch>
              <Route path='/login' component={LoginScreen} />
              <Route path='/' component={WelcomeScreen} />
           </Switch>
        </BrowserRouter>
     </div>, document.querySelector('.container'));

上面，我們使用了來自'react-router-dom'的BrowserRouter，Route和Switch。

所以每當你在React Router'Route'中添加一個組件，也就是說，

<Route path='/login' component={LoginScreen} />

.. 然后'React Router'將為此組件添加一個名為'history'的新屬性 （在本例中為LoginScreen）。 您可以使用此歷史記錄以編程方式導航到其他rountes。

所以現在在LoginScreen組件中，您可以像這樣導航：

2：LoginScreen：

return (
      <div>
       <h1> Login </h1>
       <form onSubmit={this.formSubmit.bind(this)} >
         //your form here
       </form>
      </div>

    );



formSubmit(values) {
 // some form handling action
   this.props.history.push('/'); //navigating to Welcome Screen
}

Answer 2

因為一切都像反應世界中的地獄一樣變化，這是一個在2016年12月為我工作的版本：

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

var Main = require('../components/Main');
var Home = require('../components/Home');
var Dialogs = require('../components/Dialogs');

var routes = (
    <Router history={browserHistory}>
        <Route path='/' component={Main}>
            <IndexRoute component={Home} />
            <Route path='/dialogs' component={Dialogs} />
        </Route>
    </Router>
);

module.exports = routes

Answer 3

要創建瀏覽器歷史記錄，您現在需要像History包一樣創建它，就像您嘗試過的那樣。

import createBrowserHistory from 'history/lib/createBrowserHistory';

然后將其傳遞給路由器

<Router history={createBrowserHistory()}>
    <Route />
</Router>

文檔完美地解釋了這一點

Answer 4

 import React, { Component} from 'react';
 import { Link } from 'react-router-dom';
 class Login extends Component {
 constructor(props){
 super(props)
 }
 handleClick(event){
  this.props.history.push('/dashboard')
}
 render() {
  return (
         <Button color="primary" className="px-4"  onClick={this.handleClick.bind(this)}>Login</Button>
          )}
}