在单独的文件中反应路由器代码

Question

我是 reactjs 的新手，正在努力学习使用 react router 的 redux。我想将路线作为单独的文件。但是不知何故它不起作用，因为我无法传递依赖项。以下是代码详情。

工作 index.js 还有路线：

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import {ReduxRouter} from "redux-react-router";
import {Route} from "react-router"

import createBrowserHistory from "history/lib/createBrowserHistory"
import configureStore from './store';

import App from "./containers/App";
import Home from "./components/Home";
import Countries from "./components/Countries";
import {fetchData} from './actions/actions';

const history = new createBrowserHistory();
const store = configureStore();

function loadData() {
  store.dispatch(fetchData('https://restcountries.eu/rest/v1/all'))
}

ReactDOM.render(
  <Provider store={store}>
    <ReduxRouter>
      <Route history={history}>
        <Route component={App}>
          <Route path='/' component={Home} />
          <Route path='/countries' component={Countries} onEnter={loadData} />
        </Route>
      </Route>
    </ReduxRouter>
  </Provider>,
  document.getElementById('root')
);

以下是我尝试拆分为单独的代码routes.js

index.js

import 'babel-core/polyfill';
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import {ReduxRouter} from "redux-react-router";
import {Route} from "react-router"

import createBrowserHistory from "history/lib/createBrowserHistory"
import configureStore from './store';

import routes from "./routes";
import {fetchData} from './actions/actions';

const history = new createBrowserHistory();
const store = configureStore();

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

routes.js

import React from "react";
import { Provider } from 'react-redux';
import {ReduxRouter} from "redux-react-router";
import {Route} from "react-router"


import App from "./../containers/App";
import Home from "./../components/Home";
import Countries from "./../components/Countries";

const router =
<Route history={history}>
  <Route component={App}>
    <Route path='/' component={Home} />
    <Route path='/countries' component={Countries} onEnter={loadData} />
  </Route>
</Route>;

export default router;

但是由于无法识别 loadData 函数而抛出错误。

请帮忙。

Answer 1

将其作为子项传递，注意父项称为 Router:

<Router history={history}>
  {routes}        
</Router>

另外 Route 不接受 history 属性，Router 接受。

在我的启动器上查看 Router.js 和 Route.js 的示例：https://github.com/DominicTobias/universal-react/tree/master/app

Answer 2

在遵循 Dominic 给出的答案后，我更改了如下代码以将依赖项作为函数参数传递，因为我不想再次创建存储对象。现在它工作正常。以下是修改后的代码。

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import {ReduxRouter} from "redux-react-router";
import {Route} from "react-router"

import createBrowserHistory from "history/lib/createBrowserHistory"
import configureStore from './store';

import App from "./containers/App";
import Home from "./components/Home";
import Countries from "./components/Countries";
import {fetchData} from './actions/actions';
import routes from "./routes";

const history = new createBrowserHistory();
const store = configureStore();

function loadData() {
  store.dispatch(fetchData('https://restcountries.eu/rest/v1/all'))
}


ReactDOM.render(
  <Provider store={store}>
    <ReduxRouter>
      <Route history={history}>
        {routes(loadData)}
      </Route>
    </ReduxRouter>
  </Provider>,
  document.getElementById('root')
);

routes.js

import React from "react";
import { Provider } from 'react-redux';
import {ReduxRouter} from "redux-react-router";
import {Route} from "react-router"


import App from "./../containers/App";
import Home from "./../components/Home";
import Countries from "./../components/Countries";

function router(loadData) {
  return (<Route component={App}>
          <Route path='/' component={Home} />
          <Route path='/countries' component={Countries} onEnter={loadData} />
        </Route>);
}
export default router;

在单独的文件中反应路由器代码

react router code in separate file

reactjs

react-router