ReactJs React-Router 导航答案

【问题标题】：ReactJs React-Router NavigationReactJs React-Router 导航
【发布时间】：2017-10-14 22:40:13
【问题描述】：

我遇到了一些与 react-router Navigation 相关的问题。在我的导航中有2个菜单登录和注册，我的索引页面是登录。

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

我的代码如下：

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 进行了尝试，但它不起作用。只有当我点击浏览器的向后箭头时它才有效。

 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）

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);
        });
    }
},

问题：

如何显示/隐藏登录/注销菜单。
登录后显示注销菜单，当我们点击注销菜单时显示登录菜单

【问题讨论】：

你用什么来管理状态？您的代码 sn-ps 都没有显示任何状态管理。您可能希望将本地存储内容加载到 componentWillMount 生命周期回调中的状态。
我的会话值来自登录组件中handleSubmit函数的回调函数中的服务器端。
我尝试在本地存储中存储价值。我在 NAV 组件中也得到了这个值。当我单击登录（提交）按钮时，它不起作用。但是当我刷新我的页面或转到后退页面时，会出现注销菜单。因为重新渲染后的值会进入本地存储。你能帮帮我吗？我被它困住了。
ReactJs React-Router Navigation/show and hide login logout menu的可能重复

标签： reactjs navigation react-router

【解决方案1】：

您应该在幕后制定一些状态管理策略来实现此行为。所以，你可以有如下的组件结构

App
- Nav
- LoginForm

没有像 redux/mobX 这样的状态管理库，你需要在 App 组件中定义状态

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>
    );
  }
}

然后在您的导航组件中，您可以使用isLoggedIn 标志

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

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

在 redux/mobx 中，它将以不同的方式完成。

【讨论】：