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')
);

在努力修复历史后，我最终得到了以下内容。但是当我加载网站时，会显示导航栏的内容（在App中声明），但不会呈现App的子内容（例如：Main或Blog）。

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)

我做了一些进一步的测试（使用我修复的版本）。在App渲染功能中，我正在让孩子们渲染它们。现在看来孩子们是不确定的。我猜想这与以下事实有关：在旧版本中，其他路线是＆＃34; /＆＃34; {App}路线。而在此之前路由器4的方式已经不再是这种情况了。我必须把孩子搬进主楼吗？

但这仍然无法解释为什么简单的例子不起作用。

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
添加缺失的导入

这是使用react-router 4.2和react-router-dom 4.2.2

完成的

React Router 4类型无效

1 个答案: