Thêm URL cơ sở vào ứng dụng bằng Redux-Router + React-Router

Question

Tôi đang sử dụng React-Router 1.0.0-rc3 cùng với Redux-Router 1.0.0-beta3.

Khi sử dụng React-Router, bạn có thể sử dụng useBasename với createHistory để đặt URL cơ sở cho ứng dụng để bạn có thể dễ dàng viết ứng dụng chạy bên trong thư mục phụ. Example:

Thay vì điều này:

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> 

Bạn có thể viết theo cách này sử dụng 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> 

Tuy nhiên, trong Redux-Router, bạn cần phải vượt qua createHistory thay vì history đến một reducer:

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

Làm thế nào có thể w e sử dụng useBasename trong trường hợp này?

Answer 1

Bạn có thể tạo một hàm mà kết thúc tốt đẹp useBasename:

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

Và vượt qua nó để compose:

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

Answer 2

Những thay đổi API rất thường xuyên vì vậy đây là những gì làm việc cho tôi (tôi đang sử dụng phiên bản 2.0.3 của redux-simple-router). Tôi đã xác định lịch sử tùy chỉnh trong một tệp riêng:

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

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

Bây giờ tôi cần phải khởi tạo cửa hàng:

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); 

Cuối cùng, bạn cần phải vượt qua history đến Router.

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> 
    ) 
    } 
} 

---

Trước khi tôi đến với điều này, tôi đã sử dụng một tay giải pháp. Tôi đã xác định thành phần Link của riêng mình và hành động redux của riêng tôi chịu trách nhiệm cho việc thêm URL cơ sở. Nó có thể hữu ích cho ai đó.

Cập nhật Link thành phần:

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} /> 
    } 
} 

Tuỳ tạo hành động:

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

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

đường gốc Cập nhật:

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

Lưu ý rằng những công cụ tùy chỉnh chỉ hỗ trợ đẩy đường dẫn được cập nhật, không phải là đối tượng mô tả vị trí.

Answer 3

Đối với phản ứng-router v2 hoặc v3 và sử dụng react-router-redux v4 thay vì Redux-router, thiết lập của đối tượng lịch sử sẽ trông như thế này:

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) 

Phần còn lại của thiết lập được như bình thường khi có không có thêm URL cơ sở.

Answer 4

Một biến thể của câu trả lời Diego V mà làm việc cho tôi (mà không biết mình đang làm gì):

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) 

tôi đã thay thế:

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