反應路由器v4 - 登錄路由器主頁

我正在與react-router v4一起工作，我還沒有能夠從登錄組件重定向到主頁面（索引），這是我的代碼與一個按鈕重定向直接。反應路由器v4 - 登錄路由器主頁

Login.js

constructor(props) 
{ 
    super(props); 
    this.handleClick = this.handleClick.bind(this); 
} 

handleClick(e) { 
    e.preventDefault(); 
    this.context.router.history.push('/home'); 
} 

<button onClick={(e) => this.handleClick(e)}> 
    Navigate 
</button>

Index.js

ReactDOM.render((
<Provider store={store}> 
    <Router history={hashHistory}> 
      <MuiThemeProvider> 
       <div> 
        <Login> 
         <div> 
          <SearchBar/> 
          <MainMenu/> 
         </div> 
         <Switch> 
          <Route path="/home" component={Home}/> 
          <Route path="/calendar" component={Calendar}/> 
          <Route path="/about" component={About}/> 
         </Switch> 
         <Footer/> 
        </Login> 
       </div> 
      </MuiThemeProvider> 
    </Router> 
</Provider> 
),document.getElementById('content'));

來源

2017-07-06 maritzap

您是否嘗試過使用''組件？ – Li357

嘗試使用道具代替上下文：'this.props.router.push（'/ some/path'）' –

我認爲你的解決方案是正確的，當我在它的主菜單中使用它時，它的工作原理並不是登錄！ – maritzap

解決方法1：使用鏈接

對於一個簡單的解決方案，你可以使用從Link組件react-router-dom，而不是按鈕在您的Login.js。有很多方法可以在JS中改變路線，但這似乎更容易。

你需要先導入登錄：

import {Link} from 'react-router-dom';

，然後替換你的<button>和handleClick()這個：

<span className="someclass"> 
    <Link to="/home" />Navigate</Link> 
</span>

解決方案2：使用重定向

<Redirect exact from='/' to='/home' />

附：在您當前的代碼設置中，您也可以嘗試在handleClick()中使用this.props.history.push('/home')而不是this.context.router.history.push('/home')。

來源

2017-07-06 18:36:06 Upasana

反應路由器v4 - 登錄路由器主頁

回答

相關問題