ReactJs React-Router导航 [英] ReactJs React-Router Navigation

问题描述

我陷入了一些与react-router导航相关的问题.在我的导航中，有两个菜单登录和注册，而我的索引页是登录.

I am stuck with some issue related to react-router Navigation. In my navigation there are 2 menu login and register, and my index page is login.

在登录页面上，输入电子邮件和密码的值并提交登录按钮后，它将输出为sessionValue.我的sessionValue是从serverSide返回的用户名，并重定向到TodoApp页面.登录后，它重定向到TodoApp页面.我想显示注销菜单，而不是在导航中登录.

On login page after entered the value of emaild and password and submitting login button it get output as sessionValue.My sessionValue is username which return from serverSide and it redirect to TodoApp page. After login it redirected to TodoApp page. I want to display logout menu instead of login in navigation.

我的代码如下:

app.jsx

    ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={Main}>
        <Route path="RegistrationForm" component={RegistrationForm}/>
        <Route path="todoapp/:sessionValue"component={TodoApp}/>
        <IndexRoute component={Login}/>
    </Route>
  </Router>, 
  document.getElementById('app')
);

导航组件

我通过使用localstorage尝试了此操作，但是它不起作用.仅当我单击浏览器的向后箭头时，它才起作用.

I tried this by using localstorage but it doesn't work. It works only when I clicked on backward arrow of browser.

 var Nav= React.createClass({
        render:function(){
            var strUserName = localStorage.getItem('sessionValue');
            console.log(strUserName);
        function loginMenu(){
                if(strUserName){

                                return <Link to="/RegistrationForm" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>Logout</Link> 

            }
            else{
                return <IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>LogIn</IndexLink> 

            }
        }
            return(
                <div className="top-bar">
                        <div className="top-bar-left">
                            <ul className="menu">
                            <li className="menu-text">
                                React App
                            </li>
                            <li>
                                {loginMenu()}
                            </li>
                            <li>
                                    <Link to="/RegistrationForm" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>Signup</Link>
                            </li>

                            </ul>
                        </div>
                        </div>
                );
        }
        });
 module.exports=Nav;

登录页面(login.jsx)

login page (login.jsx)

if(validForm){
        axios.post('/login', {
        email:this.state.strEmail,
        password:this.state.strPassword
        })
        .then(function (response) {
        //console.log(response.data);
        var sessionValue=response.data;
//After login todoApp page is open and with session value.session value passed through url to todoApp.
        browserHistory.push(`todoapp/${sessionValue}`);
        localStorage.setItem('sessionValue',sessionValue);
 })
        .catch(function (error) {
        console.log(error);
        });
    }
}, 

问题:

1. 如何显示/隐藏登录/注销菜单.
2. 登录后显示退出菜单，当我们单击退出菜单时显示登录菜单

推荐答案

您应该在幕后制定一些状态管理策略来实现此行为.因此，您可以具有以下组件结构

You should have some state management strategy behind the scene to implement this behavior. So, you can have the following component structure

App
- Nav
- LoginForm

没有任何状态管理库(例如redux/mobX)，您需要在App组件中定义状态

Without any state management library like redux/mobX you need to have state defined in App component

class App extends Component {
  constructor(props) {
    super(props);
    this.onLoggedInChanged = this.onLoggedInChanged.bind(this);
    this.state = {
      isLoggedIn: false
    }
  }
  onLoggedInChanged(isLoggedIn) {
    this.setState({
      isLoggedIn: isLoggedIn
    });
  }
  render() {
    return (
      <Nav isLoggedIn={this.state.isLoggedIn} />
      <LoginForm onLoggedInChanged={this.onLoggedInChanged}></LoginForm>
    );
  }
}

然后在Nav组件中，可以使用isLoggedIn标志

Then in your Nav component you can use isLoggedIn flag

Nav = () => {
  let loginElement = this.props.isLoggedIn ? 'Logged in user' : 'Not logged in'
  return (<div>{loginElement }</div>)
}

您可以在此处的文档中找到有关React应用程序中状态的更多信息 https ://facebook.github.io/react-native/docs/state.html

You can find more information about state in react application in their docs here https://facebook.github.io/react-native/docs/state.html

在redux/mobx中，将以另一种方式完成

In redux/mobx it will be done in a different way.

这篇关于ReactJs React-Router导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！