Question

我有这样的路线

render(
  <Provider store={store}>
      <Router history={history}>
        <Route path='/' component={TopContainer}>
            <IndexRoute component={Login} />
            <Route path='main' component={MainContainer} /> 
            <Route path='second' component={SecondContainer} /> 
        </Route>        
    </Router>
  </Provider>,
  document.getElementById('root')
)

我喜欢跳到第二个并使用

import { browserHistory } from 'react-router';
browserHistory.push('/#second');

The result was that the browser address field was filled with       
"http://localhost:3000/#second" but the page did not move-to/show 
"http://localhost:3000/#second" and still stay at the same page.
Now, if I hit enter key on the browser address field it then 
show/move-to the right page (http://localhost:3000/#second).

出了什么问题？

感谢

Answer 1

＃不是网址的一部分。它是由您正在使用的history添加的。此外，您使用browserHistory进行推送，但未将其用作应用history。

进行这些更改

render(
  <Provider store={store}>
      <Router history={browserHistory}>
        <Route path='/' component={TopContainer}>
            <IndexRoute component={Login} />
            <Route path='main' component={MainContainer} /> 
            <Route path='second' component={SecondContainer} /> 
        </Route>        
    </Router>
  </Provider>,
  document.getElementById('root')
)

将history更改为browserHistory

import { browserHistory } from 'react-router';
browserHistory.push('/second');

然后使用它来推送到second页面

Answer 2

与#一起使用的历史记录是hashHistory。它适用于以下地址：http://localhost:3000/#/second

使用browserHistory这样的地址：http://localhost:3000/second

You can find more information on react-router-tutorial

路线没有做出反应

2 个答案: