Question

我正在寻找一种方法，当用户点击按钮时，使用react-router更改reactJS中的路线。

以下是我的jsx文件中的相关代码（为简洁起见省略了组件的详细信息）：

var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory, browserHistory} = require('react-router');
var {Link, IndexLink} = require('react-router');

var Main = React.createClass({
    render: function(){
        return(
            <div>
                <header>
                    <Router history={hashHistory}>
                        <Route path='/' component={Splash}></Route>
                        <Route path='login' component={Login}/>
                    </Router>
                </header>
                <footer>
                     <Button_/>
                 </footer>
             </div>
         );
     }
});

var Login = React.createClass({
     render: function(){

         return(
             <div>This is the login component</div>
         );
     }
 });

var Button_ = React.createClass({

    handleClick: function(e){
        e.preventDefault();
    },

    render: function(){
        return(
            <Link to='/login' activeClassName='active'>LOGIN</Link>
        );
    }
});

var Splash = React.createClass({

    render: function(){

         return(
             <div>This is the Splash component</div>
        );
    }

 });

 ReactDOM.render(<Main/>, document.getElementById('app'));

正如您现在可能看到的那样，Splash组件是页面上显示的默认组件。当用户点击Link组件中的Button_时，我希望Splash组件替换为DOM中的Login组件。

我正在运行python服务器进行测试，因此网址看起来像http://localhost:8000/public/#/?_k=hqkhl0

我目前的代码并没有按照我的意愿去做。如果我手动输入http://localhost:8000/public/#/login，页面会更改，但点击该按钮不起作用。

我还尝试在＆＃39; handleClick＆＃39;中使用browserHistory.push()手动更改页面。功能按钮_＆＃39; （并且还在正确的位置添加了onClick属性），但这并没有给我我想要的结果。

我第一次尝试

browserHistory.push('/#/login');

这导致重定向到http://localhost:8000/#/login，显然不对。

然后我尝试了

browserHistory.push('public/#/login');

导致重定向到http://localhost:8000/public/public/#/login，再次，错误。

如何成功路由到Login组件？

Answer 1

您可以尝试将登录路由实现为启动路由的子路由，这可以减轻导致错误级别的问题，可以这么说。

<Router history={hashHistory}>
  <Route path='/' component={Splash}>
    <Route path='/login' component={Login}/>
  </Route>
</Router>

Answer 2

在你的handleClick函数中试试这个：

this.props.router.replace('login')

这是“react-router”：“^ 3.0.2”，

Answer 3

    file_put_contents(public_path() . "/" . $fileName, file_get_contents($url));

RRD为我们提供了useHistory挂钩，我们可以使用它来访问浏览器的历史对象和history.push（'/ path'）方法将浏览器的URL推送到我们在机架内传递的URL。

ReactJS：根据点击事件更改路线

3 个答案: