react-router-redux

问题 I am new with React and I have setup my React project with Facebook's create-react-app. Here are the core files: Index.js import React from 'react'; import ReactDOM, { render } from 'react-dom'; import { BrowserRouter as Router } from 'react-router-dom'; import createHistory from 'history/createBrowserHistory'; import { createStore, applyMiddleware } from "redux"; import { Provider } from 'react-redux' import { routerMiddleware, syncHistoryWithStore } from 'react-router-redux'; import thunk

问题 I am using react router to define the routes. And i am using create-react-app for developments. My question is if i type the url for subpages in address bar and try to visit it works in development build but not in production build. I am using a a simple express server for hosting the production build var express = require('express'), app = express(), http = require('http'), httpServer = http.Server(app); app.use(express.static(__dirname + '/build')); app.get('/', function(req, res) { res

问题 I have an issue with my app that I cannot find solution for anywhere. I use react-router-redux and syncHistoryWithStore . When I click on my navigation to change a route using Link the new route loads, URL in the browser updates, however the location state doesn't update unless I click the Link two times. UPDATE: I've noticed it might have something to do with Chrome React DevTools. If I open the React Devtools and select provider then unwrap the components tree one at a time, the location

问题 I am using react-router-redux and I'm trying to update the header of my app, that receives it's state from the store, whenever the route changes ( @@router/UPDATE_LOCATION ) Currently I'm dispatching actions in a componentWillMount like: componentWillMount() { this.props.appActions.setHeader('New Block') } When I manually set the header in componentWillMount on route /blocks/new , and it is a child of a route 'blocks', who both have a different header, it doesn't work when I go back in

问题 I've just started learning React and got stuck at this error. Uncaught TypeError: Cannot read property 'pathname' of undefined at new Router Here is my code: var React = require('react'); var ReactDOM = require('react-dom'); var { Route, Router, IndexRoute } = require('react-router'); var hashHistory = require('react-router-redux') var Main = require('./components/Main'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}> </Route> </Router>, document

问题 I have a universal React app that is using Redux and React Router. Some of my routes include parameters that, on the client, will trigger an AJAX request to hydrate the data for display. On the server, these requests could be fulfilled synchronously, and rendered on the first request. The problem I'm running into is this: By the time any lifecycle method (e.g. componentWillMount ) is called on a routed component, it's too late to dispatch a Redux action that will be reflected in the first

问题 I'm trying to use react router with TypeScript. However, I have certain problems using withRouter function. On the last line, I'm getting pretty weird error: Argument of type 'ComponentClass<{}>' is not assignable to parameter of type 'StatelessComponent<RouteComponentProps<any>> | ComponentClass<RouteComponentProps<any>>'. Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<RouteComponentProps<any>>'. Type '{}' is not assignable to type 'RouteComponentProps<any>'. Property

问题 Goal : when loading a react-router route, dispatch a Redux action requesting asynchronic Saga worker to fetch data for the underlying stateless component of that route. Problem : stateless components are mere functions and don't have lifecycle methods, such as componentDidMount, so I can't(?) dispatch Redux action from inside the function. My question is partly related to Converting stateful React component to stateless functional component: How to implement "componentDidMount" kind of

问题 Is it possible to call an async redux action known as a thunk on a particular route and not perform the transition until the response has succeeded or failed? Use Case We need to load data from the server and fill a form with initial values. These initial values don't exist until the data is fetched from the server. some syntax like this would be great: <Route path="/myForm" component={App} async={dispatch(loadInitialFormValues(formId))}> 回答1: To answer the original question of preventing the

问题 After enabling historyApiFallback in the webpack config file and restarting the server, when changing location pathname, the browser refreshes, causing outer elements to re-mount (what I mean is that, I can see it flash white and back to normal) where this should only happen for nested the.props.children . In my particular case, there's a <Navbar /> element that is always present at the top and a container that has the { this.props.children } . I wonder what's going on? App entrypoint: import