Question

我正在使用react-router 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'));

Answer 1

解决方案1：使用链接

对于简单的解决方案，您可以使用react-router-dom中的Login.js组件，而不是import {Link} from 'react-router-dom';中的按钮。有一些方法可以改变JS的路线，但这似乎更容易。

您需要先导入登录：

<button>

然后将handleClick()和<span className="someclass"> <Link to="/home" />Navigate</Link> </span>替换为：

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

解决方案2：使用重定向

this.props.history.push('/home')

P.S。在您当前的代码设置中，您还可以尝试在handleClick()而不是this.context.router.history.push('/home')中使用(id,code,key,value) 1,A,p,10 2,B,q,20 3,B,p,30 3,B,q,20 3,C,t,60 3,C,q,20。

React router v4 - 登录路由器主页

1 个答案: