The fusion-plugin-connected-react-router
package provides integration points with connected-react-router. It is designed
to be used along side of fusion-plugin-react-router
.
yarn add fusion-plugin-connected-react-router connected-react-router
This plugin provides a ReduxEnhancer plugin for integrating connected-react-router into your app. See connected-react-router docs for usage.
// src/main.js
import App from 'fusion-react';
import Router, {RouterToken, RouterProviderToken} from 'fusion-plugin-react-router';
import ConnectedRouterEnhancer from 'fusion-plugin-connected-react-router';
import {EnhancerToken} from 'fusion-plugin-react-redux';
import {ConnectedRouter} from 'connected-react-router';
import root from './components/root';
export default function start(App) {
const app = new App(root);
// Make sure you register `fusion-plugin-react-router` on the `RouterToken`
app.register(RouterToken, Router);
// Register the connected router enhancer on the redux EnhancerToken
app.register(EnhancerToken, ConnectedRouterEnhancer);
// Register the ConnectedRouter provider on the RouterProviderToken
app.register(RouterProviderToken, ConnectedRouter);
// ... other registrations
return app;
}
If you have other redux enhancers, it may be easier to integrate via a custom plugin
// src/main.js
import App from 'fusion-react';
import {createPlugin} from 'fusion-core';
import Router, {RouterToken, RouterProviderToken} from 'fusion-plugin-react-router';
import ConnectedRouterEnhancer, {ConnectedRouterToken} from 'fusion-plugin-connected-react-router';
import {EnhancerToken} from 'fusion-plugin-react-redux';
import {ConnectedRouter} from 'connected-react-router';
import {compose} from 'redux';
import root from './components/root';
export default function start(App) {
const app = new App(root);
// Make sure you register `fusion-plugin-react-router` on the `RouterToken`
app.register(RouterToken, Router);
// Register the ConnectedRouter provider on the RouterProviderToken
app.register(RouterProviderToken, ConnectedRouter);
// Register the connected router enhancer a token to reference latter
app.register(ConnectedRouterToken, ConnectedRouterEnhancer);
// Register a custom plugin that composes all your enhancers
app.register(EnhancerToken, createPlugin({
deps: {connectedRouterEnhancer: ConnectedRouterToken},
provides: ({connectedRouterEnhancer}) => {
return compose(
connectedRouterEnhancer,
// any other custom enhancers...
myCustomEnhancer
);
}
}));
// ... other registrations
return app;
}
import ConnectedRouterPlugin from 'fusion-plugin-connected-react-router';
The plugin.
import {ConnectedRouterToken} from 'fusion-plugin-connected-react-router';
A token for registering the router plugin on. Useful for integrating with other redux enhancers.
fusion-plugin-connected-react-router's People
fusion-plugin-connected-react-router's Issues
@@router/LOCATION_CHANGE events fired off multiple times on page load
Event @@router/LOCATION_CHANGE
gets fired off 4x on page load. Looked around online and it seems like there's nothing mentioning this issue.
Type of issue
Bug?
Description
@@router/LOCATION_CHANGE
action should get fired once on page load.
Current behavior
@@router/LOCATION_CHANGE
action gets fired 4x on page load.
They all have the same exact payload.
{
type: '@@router/LOCATION_CHANGE',
payload: {
location: {
pathname: '/',
search: '',
hash: ''
},
action: 'POP',
isFirstRendering: false
}
}
Expected behavior
There should only be one @@router/LOCATION_CHANGE
Steps to reproduce
- Follow the README to install this plugin on your Fusion app
- Load a page.
Your environment
-
fusion-plugin-connected-react-router version: 1.1.1
-
Node.js version (
node --version
): 8.11.3 -
npm version (
npm --version
): 5.6.0 -
Operating System: macOS Mojave 10.14.3
Cannot read property 'pathname' of undefined
Type of issue
Bug
Description
Project builds successfully but I get following error on app start:
TypeError: Cannot read property 'pathname' of undefined
at /Users/muhammadali/WebstormProjects/fusion-visualizations/node_modules/connected-react-router/lib/ConnectedRouter.js:58:37
at dispatch (/Users/muhammadali/WebstormProjects/fusion-visualizations/node_modules/redux/lib/redux.js:220:7)
at /Users/muhammadali/WebstormProjects/fusion-visualizations/node_modules/redux-logger/dist/redux-logger.js:1:7807
at /Users/muhammadali/WebstormProjects/fusion-visualizations/node_modules/redux-thunk/lib/index.js:14:16
at oldDispatch (/Users/muhammadali/WebstormProjects/fusion-visualizations/node_modules/fusion-plugin-connected-react-router/src/index.js:37:20)
at /Users/muhammadali/WebstormProjects/fusion-visualizations/node_modules/connected-react-router/lib/middleware.js:25:18
at store.dispatch.action (/Users/muhammadali/WebstormProjects/fusion-visualizations/node_modules/fusion-plugin-connected-react-router/src/index.js:36:18)
at Object.onLocationChanged (/Users/muhammadali/WebstormProjects/fusion-visualizations/node_modules/connected-react-router/lib/ConnectedRouter.js:154:16)
at handleLocationChange (/Users/muhammadali/WebstormProjects/fusion-visualizations/node_modules/connected-react-router/lib/ConnectedRouter.js:85:17)
at new ConnectedRouter (/Users/muhammadali/WebstormProjects/fusion-visualizations/node_modules/connected-react-router/lib/ConnectedRouter.js:94:7)
My Code looks something like this:
app.register(RouterToken, Router)
app.register(RouterProviderToken, ConnectedRouter)
app.register(ConnectedRouterEnhancerToken, ConnectedRouterEnhancer)
app.register( EnhancerToken, createPlugin({ deps: { connectedRouterEnhancer: ConnectedRouterEnhancerToken }, provides: ({ connectedRouterEnhancer }) => { const enhancer = composeEnhancers( connectedRouterEnhancer, applyMiddleware(...middlewares), ) return enhancer }, }), )
app.register(ReduxToken, Redux)
app.register(ReducerToken, rootReducer)
Current behavior
App crashes
Steps to reproduce
I've followed the steps given in the documentation but failed to connect this plugin.
Your environment
-
fusion-plugin-connected-react-router version: 1.0.1
-
Node.js version: 8.11
-
npm version: 5.6.0
-
Operating System: macOS Mojave
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.