Jelajahi Sumber

login + navbar fixes

pocu46 3 tahun lalu
induk
melakukan
9710612813

+ 11 - 4
hipstagram/src/App.js

@@ -3,7 +3,8 @@ import "./App.css";
 import Header from "./Header/header";
 import Navigation from "./Content/Navigation/navigation";
 import News from "./Content/News/news";
-import { Redirect, Route, Router, Switch } from "react-router-dom";
+import { Redirect, Route, BrowserRouter as Router, Switch } from "react-router-dom";
+// import { Redirect, Route, Router, Switch } from "react-router-dom";
 import Music from "./Content/Music/music";
 import Profile from "./Content/Profile/profile";
 import Settings from "./Content/Settings/settings";
@@ -16,6 +17,11 @@ import { store } from "./Redux/promise_reducer";
 import { Provider } from "react-redux";
 import history from "./history";
 
+function fff(a) {
+    console.log(a)
+    return <div>Пусто</div>
+}
+
 function App() {
     return (
         <Provider store={store}>
@@ -27,9 +33,9 @@ function App() {
                 <Navigation />
 
                 <div className="app-wrapper-content">
-                    {/* <Redirect exact from="/" to="/profile" /> */}
                     <Switch>
-                    {/* <Route
+                    <Redirect exact from="/" to="/profile" />
+                    <Route
                         path="/profile" 
                         render={() => <Profile />}
                     />
@@ -44,12 +50,13 @@ function App() {
                     <Route
                         path="/404"
                         render={() => <Page404 /> }
-                    /> */}
+                    />
                     <Route path="/news" component={News} />
                     <Route path="/music" component={Music} />
                     <Route path="/settings" component={Settings} />
                     <Route path="/login" component={Login} />
                     <Route path="/registration" component={Registration} />
+                    <Route component={fff} />
                     </Switch>
                 </div>
             </div>

+ 13 - 5
hipstagram/src/Content/Login/Login.js

@@ -1,16 +1,24 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { connect } from 'react-redux';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useHistory } from 'react-router-dom';
 import { actionLogin } from '../../Actions/action_login';
 import LoginError from '../../Components/LoginError/LoginError';
-import history from "../../history";
+// import history from "../../history";
 import './Login.css';
 
-const Login = ({onLogin=null}) => {        //деструктуризация объекта
+const Login = ({onLogin=null, checkLogin=false}) => {      //деструктуризация объекта
+
+    let history = useHistory();
 
     if(localStorage.authToken) {
         history.push('/profile')
     }
+
+    useEffect(()=>{
+        if(checkLogin) {
+            history.push('/profile')
+        }
+    }, [checkLogin])
     
     const loginRef = useRef(null)
     const pasRef = useRef(null)
@@ -36,6 +44,6 @@ const Login = ({onLogin=null}) => {        //деструктуризация о
     )
 }
 
-const CLogin = connect(null, {onLogin: actionLogin})(Login)
+const CLogin = connect((state) => ({checkLogin: state.auth.isLogin}), {onLogin: actionLogin})(Login)
 
 export default CLogin;

+ 6 - 6
hipstagram/src/Content/Navigation/navigation.js

@@ -6,22 +6,22 @@ function Navigation() {
     return (
         <nav className="navigation">
             <div>
-                <Link to={"/profile"}>Profile</Link>
+                <NavLink to={"/profile"}>Profile</NavLink>
             </div>
             <div>
-                <Link to={"/messages"}>Messages</Link>
+                <NavLink to={"/messages"}>Messages</NavLink>
             </div>
             <div>
-                <Link to={"/news"}>News</Link>
+                <NavLink to={"/news"}>News</NavLink>
             </div>
             <div>
-                <Link to={"/music"}>Music</Link>
+                <NavLink to={"/music"}>Music</NavLink>
             </div>
             <div>
-                <Link to={"/users"}>Users</Link>
+                <NavLink to={"/users"}>Users</NavLink>
             </div>
             <div>
-                <Link to={"/settings"}>Settings</Link>
+                <NavLink to={"/settings"}>Settings</NavLink>
             </div>
         </nav>
     );