Sau khi đăng nhập làm thế nào để chuyển sang page home trong reactjs

mình có 1 page login, sau khi login thì có token gửi về, giờ mình đang loay hoay ko biết làm cách nào để chuyển từ page login sang page home

ReactJS không có sẵn công nghệ chuyển page.
Mình thắc mắc là bạn đã làm được login page thì cũng phải biết ít ra là đổi URL chứ nhỉ.
Bình thường bên ReactJS người ta hay dùng cái này: https://github.com/ReactTraining/react-router phục vụ cho single page app.

2 Likes

là nó đó bạn, mình đang mắc cái router này mấy hôm nay, bạn có thể thông não hộ mình dc ko

Bọn này lúc nào cũng có 1 cái method, gọi nó là nó đổi route.
Bản chất nó là nó có 1 cái view to, nó đập hết child component đi rồi nó dựng lại child component mới, ứng với cái route của mình.

1 Like

Kiểu như mình có 2 component login và home, sau khi login xong lấy dc token rồi thì mình lưu nó vào localstore để lấy ra xác thực sau. Trong app.js thì mình import login và home vào, sau đó đặt 2 thằng trong bằng route với path login là /login, còn thằng home thì cho trong là cái route biến thể của route thông thường có chức năng là nếu chưa đăng nhập thì redirect sang login và nếu đăng nhập rồi thì cho vào trang home , nhưng vẫn ko dc, mình có xem rất nhiều cách trên mạng rồi nhưng rất khó hiểu

Đưa code bạn config route ra nào.

3 Likes

code app.js với login mình đây

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Switch>
            <Route exact path="/login" component={Login} />
            <PrivateRoute component={Home} />
          </Switch>
        </div>
      </Router>
    );
  }
}

const checkAuth = () => {
  console.log(localStorage.getItem('token'));
  if (localStorage.getItem('token') !== null) return true;
  return false;
}

function PrivateRoute(component: Component, ...rest) {
  console.log(checkAuth());
  return (
    <Route
      {...rest}
      render={props =>
        checkAuth() ? (
          <Component {...props} />
        ) : (<Redirect
            to={{
              pathname: '/login',
              state: { from: props.location }
            }}
          />
        )
      }
    >
    </Route>
  );
}
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Redirect } from 'react-router-dom';
import Home from './Home';

const API_LOGIN = 'http://localhost:5000/api/login';

class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      user: '',
      password: '',
      redirectToReferrer: false,
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e) {
    // ...
  }

  handleSubmit(e) {
    // ...
  }

  render() {
    let { from } = this.props.location.state || { from: { pathnam: '/'} };
    let redirectToReferrer = this.props.state.redirectToReferrer;
    if (redirectToReferrer) return <Redirect to={from} />;
    return (
      <div className="container">
        {/* other stuff */}
      </div>
    );
  }
}

export default Login;

Cái này bạn đang lưu trong state. Nhưng sao lại láy ra từ props?

5 Likes

cảm ơn mấy bác e xử lí dc vấn đề rồi =))

1 Like

Có thể share e với không bác, e mới tập tành, mà thấy cái route nó thực sự rất khó hiểu, e thấy code demo rất nhìu nhưng vì không hiểu nó nên e chưa bt phải áp dụng vào cái của e như nào.
Bác có thể share chút kinh nghiệm được không ạ ?

bạn ơi, bạn có thể cho mình tham khảo full phần app.js với phần login của bạn được ko? Cảm ơn bạn.

Bạn dùng history.push("/") để redirect về home page nhé

2 Likes

Thanks bạn . Nhưng mình vẫn không biết sửa chỗ nào nữa tại cái này mình mới tìm hiểu nên chưa biết rõ lắm.Bạn có thể chỉ mình được không.Cảm ơn bạn.

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?