反应路由器 - 未定义的历史

Posted 2023-02-21

【中文标题】反应路由器 - 未定义的历史

【英文标题】：React router - undefined history

【发布时间】：2016-04-08 08:17:27

【问题描述】：

我正在尝试使用 1.0.0-rc1 react-router 和 history 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()];
      
    

但添加中间件后，我在访问网站后得到的只是：

无法获取/

【参考方案1】：

从 "react-router": "^4.1.1" 开始，您可以尝试以下方法：

使用'this.props.history.push('/new-route')'。这是一个详细的例子

1：索引.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'));

上面，我们使用了 BrowserRouter、Route 和 Switch from 'react-router-dom'。

所以每当你在 React Router 'Route' 中添加一个组件，也就是

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

..然后“React Router”将向该组件添加一个名为“history”的新属性（在本例中为LoginScreen）。您可以使用此历史道具以编程方式导航到其他路线。

所以现在在 LoginScreen 组件中，您可以像这样导航：

2：登录界面：

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

【参考方案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

【参考方案3】：

要创建浏览器历史记录，您现在需要从 History 包创建它，就像您尝试过的一样。

import createBrowserHistory from 'history/lib/createBrowserHistory';

然后像这样传递给路由器

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

docs 完美诠释了这一点

【讨论】：

请添加其他历史类型 createHashHistory, createBrowserHistory,createMemoryHistory

@limelights 我尝试了您的建议并更新了问题。可以看看吗？

@holms 在撰写本文时它工作正常，react-router 自 1 月以来发生了重大变化 :)

“历史”类型不可分配给“历史”类型——关闭笔记本电脑

@ChrisNoreikis 他们可能在一年前就改变了它。 :)