javascript - React Router 4 类型无效

Question

我已经更新到最新版本的react/react-router/...我现在正在尝试解决这些依赖项的所有更改所带来的各种问题。

注意:我的代码以前可以工作，但由于新版本而不再工作。

所以我之前用它来处理我的路线:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import {syncHistoryWithStore, push} from 'react-router-redux';

import configureStore from './store/store';

import App from './components/App';
import EULA from './containers/EULA';
import Main from './containers/Main';
import Blog from './containers/Blog';

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

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={App}>
                <IndexRoute component={Main} />
                <Route path="/main" component={Main} />
                <Route path="/Feed" component={Blog} />
                <Route path="/Blog" component={Blog} />
                <Route path="/EULA" component={EULA} />
            </Route>
        </Router>
    </Provider>,
    document.getElementById('app')
);

在修复历史记录之后，我得到了以下结果。但是当我加载网站时，会显示导航栏的内容(在应用程序中声明)，但不会呈现应用程序的子内容(例如:主要或博客)。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Switch, BrowserRouter, Route, IndexRoute } from 'react-router';
import { createBrowserHistory } from 'history';
import {syncHistoryWithStore, push} from 'react-router-redux';

import configureStore from './store/store';

import App from './components/App';
import Main from './containers/Main';
import Blog from './containers/Blog';
import EULA from './containers/EULA';

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

ReactDOM.render(
  <Provider
    store={store}>
    <Router
      history={history}>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/main" component={Main} />
        <Route path="/Feed" component={Blog} />
        <Route path="/Blog" component={Blog} />
        <Route path="/EULA" component={EULA} />
        <Redirect to="/" />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById('app')
);

经过进一步调查我发现this site描述如何迁移到路由器 4。所以我尝试了一下，但无法使该示例工作。这就是我现在拥有的:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router';

const PrimaryHeader = props => {
  return (
    <header>
      Our React Router 4 App
    </header>
  )
}

const HomePage =() => <div>Home Page</div>
const UsersPage = () => <div>Users Page</div>
const UserAddPage = () => <div>Users Add Page</div>

const PrimaryLayout = props => {
  return (
    <div className="primary-layout">
      <PrimaryHeader />
      <main>
        <Switch>
            <Route path="/" exact component={HomePage} />
            <Route path="/users/add" component={UserAddPage} />
            <Route path="/users" component={UsersPage} />
            <Redirect to="/" />
        </Switch>
      </main>
    </div>
  )
}

const App = () => (
  <BrowserRouter>
    <PrimaryLayout />
  </BrowserRouter>
)
ReactDOM.render(
  <App />,
  document.getElementById('app'));

当我编译并进入网站时，我在控制台中看到以下内容:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
in App

Check the render method of `App`.
    at invariant (invariant.js:42)
    at createFiberFromElement (react-dom.development.js:5753)
    at reconcileSingleElement (react-dom.development.js:7531)
    at reconcileChildFibers (react-dom.development.js:7635)
    at reconcileChildrenAtExpirationTime (react-dom.development.js:7756)
    at reconcileChildren (react-dom.development.js:7747)
    at mountIndeterminateComponent (react-dom.development.js:8075)
    at beginWork (react-dom.development.js:8221)
    at performUnitOfWork (react-dom.development.js:10224)
    at workLoop (react-dom.development.js:10288)

<小时/>

我做了一些进一步的测试(使用我修复的版本)。在应用程序渲染功能中，我正在获取 child 并渲染它们。现在看来， child 是没有定义的。我大胆猜测，这与旧版本中其他路由是“/”{App} 路由的子路由这一事实有关。路由器 4 之前的情况现在已经不再是这样了。我猜我必须把 children 移到 main 里面？

但这仍然不能解释为什么更简单的示例不起作用。

Answer 1

您的进口似乎有问题。如果删除node_modules并重新运行yarn install(或npm install)，编译应该已经提醒您了。

以下代码工作正常(并且符合我的预期)

import React from 'react';
import ReactDOM from 'react-dom';
import {Redirect, Route, Switch} from 'react-router';
import {BrowserRouter} from "react-router-dom";

const PrimaryHeader = props => {
    return (
        <header>
            Our React Router 4 App
        </header>
    )
};

const HomePage = () => <div>Home Page</div>;
const UsersPage = () => <div>Users Page</div>;
const UserAddPage = () => <div>Users Add Page</div>;

const PrimaryLayout = props => {
    return (
        <div className="primary-layout">
            <PrimaryHeader/>
            <main>
                <Switch>
                    <Route path="/" exact component={HomePage}/>
                    <Route path="/users/add" component={UserAddPage}/>
                    <Route path="/users" component={UsersPage}/>
                    <Redirect to="/"/>
                </Switch>
            </main>
        </div>
    )
};

const App = () => (
    <BrowserRouter>
        <PrimaryLayout/>
    </BrowserRouter>
);

ReactDOM.render(
    <App/>,
    document.getElementById('root'));

变化是:

• 从 react-router-dom 导入 BrowserRouter

• 添加缺少的导入

这是使用react-router 4.2和react-router-dom 4.2.2完成的