同步还原存储与反应路由器路由位置（路由更改时更新标头）

我正在使用react-router-redux，我试图更新我的应用程序的标题，从商店收到它的状态，每当路线更改（@@router/UPDATE_LOCATION ）同步还原存储与反应路由器路由位置（路由更改时更新标头）

在目前我派遣行动componentWillMount这样的：

componentWillMount() { 
    this.props.appActions.setHeader('New Block') 
    }

当我手动设置页眉中componentWillMount在路线/blocks/new，它是一个路线“块”的孩子，谁都有一个不同的标题，当我回到history时它不起作用，因为th路由blocks的e组件不会再次挂载，而是挂载仍然。因此，标题仍然是New Block。而不是自己的标题之前，当安装blocks，并且new仍然作为孩子卸载。

（当我尝试逆时与redux-devtools，什么似乎我每次回去的地方，一个组件再次安装的时间，这时再发生，它会再次派遣行动，以及devtool将收到另一调度）

的路线：

<Route path="begin" component={PlayerBeginContainer}> 
    <IndexRoute component={PlayerOverview}/> 
     <Route path="blocks" component={PlayerBlocks}> 
     <Route path="new" component={PlayerNewBlock}/> 
     </Route> 
</Route> 
...

我试图同步店里当路由变化，但：

if (action && action.type === UPDATE_LOCATION) { 
let path = action.payload.pathname.split('/') 
// Laboriously iterate through array to figure out what the new header state should be. 
    // i.e. if (1 in split && split[1] === 'routeName') 
    // or let lastPath = path[path.length - 1] 
    // and getting parentPath would require more checking of whether it is the parent itself or not etc. 
    // appHeader = 'routeHeader' 
    return Object.assign({}, state, { appHeader: appHeader}); 
}

当你只需要它在特定的子路由上触发时，这会变得非常单调乏味，我想避免再创建另一个嵌套结构，而我已经在路由器中定义了它。

在头文件中，我不能使用除this.props.location.pathname以外的其他任何东西来尝试找出我正在使用的路线，并且组件本身不应该自行设置标头（即在componentWillMount）。

最后的选择是使用路由器onEnter，但我想保持路由器的清洁，但也许我需要妥协。

有什么我在这里失踪？或者某种类型的lib可以帮助我呢？

TL; DR：如何让我的header组件知道我们正在使用哪条路线，而不必分解location.pathname以找出我们的位置？

来源

2016-10-11 BlockChange

你可以得到的整个位置状态作为您的''mapStateToProp''中相关响应组件的通道，方法是获取您已给予'react-router-redux''的状态的位置片段。一旦你拥有它作为道具，你应该能够做你想做的。它可能最终会再次拆分路径名，但它似乎比收听UPDATE_LOCATION动作更清晰。 – iamnat

这是否有帮助：https://github.com/reactjs/react-router-redux#how-do-i-access-router-state-in-a-container-component？ – iamnat

@iamnat，事情是，我没有使用'params.id'或'query.filter'，所以我的头仍然需要'.split（'/'）'每个案例的路径名。 – BlockChange

这是我的一个代码库中的代码。在这个应用程序中我使用哈希历史，但我认为你也可以用other history objects做同样的事情。

import {hashHistory} from 'react-router'; 
import {syncHistoryWithStore} from 'react-router-redux'; 

const history = syncHistoryWithStore(hashHistory, store); 
history.listen(location => { 
    // here you can do something after location is updated 
}); 

<Router history={history}> 
.... 
</Router>

，然后在你的组件，你可以从state.routing一些信息：

function mapStateToProps(state) { 
    return { 
    current: state.routing.locationBeforeTransitions.pathname, 
    }; 
} 

export default connect(mapStateToProps)(App);

从某些成分改变路线，这样做：

import {push} from 'react-router-redux'; 
this.props.dispatch(push('/route'));

来源

2016-10-11 08:49:24

同步还原存储与反应路由器路由位置（路由更改时更新标头）

回答

相关问题