Question

我是reactjs的新手，我尝试用它构建一些东西，但是我对react-router-redux遇到了问题。我在控制台中得到React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.。这是我的代码：

App.js

import React, { PropTypes } from 'react';

class App extends React.Component {
    render() {
        return (
        <div>
           {this.props.children}
        </div>
        );
    }
}

export default App;

Routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router'
import App from './components/App';
import Login from './components/login/Login';
import Register from './components/register/Register';

export default (
  <Route path="/" component={App}>
    <IndexRoute component={Login}/>
    <Route path="register" component={Register}/>
  </Route>
);

和Index.js

...
import { syncHistoryWithStore } from 'react-router-redux'
import { Router } from 'react-router'
import { createBrowserHistory } from 'history';
import routes from './routes';

const store = configureStore();
const history = syncHistoryWithStore(createBrowserHistory(), store)

ReactDOM.render(
    <Provider store={store}>
    <Router history={history} routes={routes}>
     </Router>
    </Provider>,
     document.getElementById('app')
);

我哪里错了？请为我解释为什么会出现此错误。预先感谢

Answer 1

React-router-redux不再维护，仅支持3.x和2.x React-router版本

回购作者建议将connected-react-router用于React-rotuer 4.x绑定

Answer 2

针对不同环境的路由器不同，您想使用BrowserRouter而不是Router。

有关更多信息，请参见React Training BrowserRouter。

index.js

// change this line
import { Router } from 'react-router';
// to
import { BrowserRouter as Router } from 'react-router-dom';

注意：您可能还必须以其他方式传递路线。这在上面提供的反应培训页面中显示。

反应路由器，路由器不工作

2 个答案: