我是新手,并且正在努力学习使用反应路由器的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函数,因此抛出错误。
请帮忙。
答案 0 :(得分:13)
将其作为孩子传递,请注意父母称为Router
:
<Router history={history}>
{routes}
</Router>
同样Route
不会使用历史道具Router
。
在我的启动器上查看Router.js和Route.js的示例:https://github.com/DominicTobias/universal-react/tree/master/app
答案 1 :(得分:3)
在按照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;