Redux-Router + React-Router

Question

का उपयोग कर किसी ऐप में बेस यूआरएल जोड़ना मैं React-Router 1.0.0-rc3 का उपयोग कर Redux-Router 1.0.0-beta3 के साथ उपयोग कर रहा हूं।

रिएक्ट-राउटर का उपयोग करते समय, आप useBasename का उपयोग createHistory के साथ एक ऐप के लिए बेस यूआरएल सेट करने के लिए कर सकते हैं, ताकि आप एक उपनिर्देशिका के अंदर चलने वाले ऐप को आसानी से लिख सकें। Example:

इसके बजाय इस बात का

:

import { createHistory } from 'history'; 

let base = "/app_name/" 

<Router history={browserHistory}> 
    <Route path={base} component={App}></Route> 
</Router> 

<Link path={base + "some_path"}>some_path</Link> 

आप useBasename का उपयोग कर इस तरह से लिख सकते हैं:

import { createHistory, useBasename } from 'history'; 

const browserHistory = useBasename(createHistory)({ 
    basename: "/app_name" 
}); 

<Router history={browserHistory}> 
    <Route path="/" component={App}></Route> 
</Router> 

<Link path="/some_path">some_path</Link> 

हालांकि, Redux-रूटर में, आप एक के लिए history के बजाय createHistory पास करनी होगी reducer:

const store = compose(
    applyMiddleware(m1, m2, m3), 
    reduxReactRouter({ 
    routes, 
    createHistory 
    }), 
    devTools() 
)(createStore)(reducer); 

डब्ल्यू कैसे कर सकते हैं इस मामले में useBasename का उपयोग करें? compose को

const createHistoryWithBasename = (historyOptions) => { 
    return useBasename(createHistory)({ 
    basename: '/app_name', 
    ...historyOptions 
    }) 
} 

और पारित यह:

Answer 1

आप एक समारोह है कि useBasename लपेटता बना सकते हैं

const store = compose(
    applyMiddleware(m1, m2, m3), 
    reduxReactRouter({ 
    routes, 
    createHistory: createHistoryWithBaseName 
    }), 
    devTools() 
)(createStore)(reducer); 

Answer 2

एपीआई बहुत बार परिवर्तन तो यह है कि क्या मेरे लिए काम किया है (मैं उपयोग कर रहा हूँ 2.0.3redux-simple-router का संस्करण)। मैं एक अलग फाइल में कस्टम इतिहास को परिभाषित किया है:

import { useRouterHistory } from 'react-router' 
import { createHistory, useBasename } from 'history' 
import { baseUrl } from '../config' 

const browserHistory = useRouterHistory(useBasename(createHistory))({ 
    basename: "/appgen" 
}); 

अब मैं दुकान प्रारंभ करने की आवश्यकता:

import { syncHistory, routeReducer } from 'redux-simple-router' 
import browserHistory from '../misc/browserHistory' 

const rootReducer = combineReducers({ 
    // ...other reducers 
    routing: routeReducer 
}); 

const reduxRouterMiddleware = syncHistory(browserHistory); 

const finalCreateStore = compose(
    // ...other middleware 
    applyMiddleware(reduxRouterMiddleware), 
)(createStore); 


const store = finalCreateStore(rootReducer, initialState); 

अंततः, आप Router को history पारित करने के लिए की जरूरत है।

import browserHistory from './misc/browserHistory' 
import routes from '../routes' 

export default class Root extends Component { 
    static propTypes = { 
    history: PropTypes.object.isRequired 
    }; 

    render() { 
    return (
     <Router history={browserHistory}> 
     {routes} 
     </Router> 
    ) 
    } 
} 

---

इससे पहले कि मैं इस के साथ आया था, मैं एक मैनुअल समाधान का उपयोग किया गया था। मैंने अपना खुद का Link घटक और अपनी खुद की रेडक्स क्रिया परिभाषित की जो मूल URL को पूर्ववत करने के लिए ज़िम्मेदार थे। यह किसी के लिए उपयोगी हो सकता है।

अपडेट किया गया Link घटक:

import React, { Component } from 'react' 
import { Link as RouterLink } from 'react-router' 
import { baseUrl } from '../config' 

export default class Link extends Component { 
    render() { 
    return <RouterLink {...this.props} to={baseUrl + '/' + this.props.to} /> 
    } 
} 

कस्टम कार्रवाई निर्माता:

import { routeActions } from 'redux-simple-router' 
import { baseUrl } from '../config' 

export function goTo(path) { 
    return routeActions.push(baseUrl + '/' + path); 
} 

अपडेट किया गया जड़ मार्ग:

import { baseUrl } from './config' 
export default (
    <Route component={App} path={baseUrl}> 
    //...nested routes 
    </Route> 
); 

ध्यान दें कि इन कस्टम उपकरण केवल अद्यतन रास्तों धक्का, नहीं का समर्थन स्थान वर्णनकर्ता वस्तु।

Answer 3

प्रतिक्रिया रूटर के लिए V2 या V3 और redux रूटर के बजाय react-router-redux v4 का उपयोग कर, इतिहास वस्तु का सेटअप इस तरह दिखेगा:

import { createHistory } from 'history' 
import { useRouterHistory } from 'react-router' 
import { syncHistoryWithStore } from 'react-router-redux' 

const browserHistory = useRouterHistory(createHistory)({ 
    basename: '<yourBaseUrl>' 
}) 
const history = syncHistoryWithStore(browserHistory, store) 

है सेटअप के बाकी हमेशा की तरह किया जाता है जब कोई अतिरिक्त आधार यूआरएल नहीं।

Answer 4

कि मेरे लिए काम किया डिएगो वी के जवाब का एक प्रकार (जानने के बिना मैं क्या कर रहा था):

import { createHistory } from 'history' 
import { useRouterHistory } from 'react-router' 
... 

const _browserHistory = useRouterHistory(createHistory)({ 
    basename: '/yourbase' 
}) 

const store = createStore(_browserHistory, api, window.__data) 
const history = syncHistoryWithStore(_browserHistory, store) 

मैं की जगह किया गया था:

//const _browserHistory = useScroll(() => browserHistory)()