仅当尚未定义段时才进行索引重定向

Question

我有这个简单的应用程序：

// index.js
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRedirect, browserHistory } from 'react-router'
import A from './a'
import B from './b'
render((
    <Router history={browserHistory}>
        <Route path='/foo' component={A}>
            <IndexRedirect to='1' />
            <Route path=':bar' component={B} />
         </Route>
    </Router>
), document.getElementById('root'))

当我在/foo/3时，如果我单击指向/foo/的链接，我将被重定向到/foo/1。

有没有一种简单的方法可以使IndexRedirect重定向到已在使用的segment而不是默认的？

Answer 1

您可以使用浏览器历史记录侦听器

browserHistory.listen(function(ev) {
    console.log('listen', ev.pathname.split('/'));
     var pathData = ev.pathname.split('/'); 
});

并将您的<IndexRedirect to='1' />更换为您想要的任何东西例如：

var defaultIndex = 1
browserHistory.listen(function(ev) {
    console.log('listen', ev.pathname.split('/'));
    var pathData = ev.pathname.split('/');
    defaultIndex = pathData[1]
});
<Router history={browserHistory}>
    <Route path='/foo' component={A}>
        <IndexRedirect to={defaultIndex} />
        <Route path=':bar' component={B} />
    </Route>
</Router>

这对我有用。