Первый маршрут React Router без меню или основного макета

Question

Я изучаю React, и я столкнулся с React Router. Я уже выполнил базовое руководство по маршрутизации, но пока не достиг своей цели, потому что я потерян.

Сначала я хочу отрендерить свой компонент Login без основной навигации, а только с чистым Login, в случае успеха он перейдет кОсновное приложение с главной навигацией (Ссылки предоставлены).

Я не хочу вход в систему с другими маршрутами, отображаемыми в виде ссылок.

Итак, я попытался проверить это в моем componentDidMount, но яНе знаю, работает ли этот компонент перенаправления так. Если у моего компонента Login есть маршрутизатор, то другие компоненты будут отображаться под именем входа в систему.

Это мой компонент Login очень простым способом с начальной загрузкой:

import React, { Component } from 'react';
// import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import logo from '../logo.svg';
import axios from 'axios';
// import TodosList from "./todos-list.component";

class Login extends Component{
    constructor(props){
        super(props);
        this.state = {
            email: '',
            password: ''
        }

    }

    componentDidMount() {
        const token = localStorage.getItem('token');
    }

    auth = (e) =>{
        e.preventDefault();
        axios.post('http://localhost:4000/api/login', {
            email: this.state.email,
            password: this.state.password
        })
            .then(response => {
                console.log(response.headers['x-auth-token']);
                if (response.headers['x-auth-token']){
                    localStorage.setItem('token', response.headers['x-auth-token']);
                }
            })
            .catch(error => {
                alert(`Usuario o Password Invalido`);
                this.setState({
                    email: '',
                    password: ''
                });
            });
    };

    onEmailChange = (e) =>{
        this.setState({
            email: e.target.value
        });
    };

    onPasswordChange = (e) =>{
        this.setState({
            password: e.target.value
        });
    };

    render(){
        return (
            <div className="container h-100">
                <div className="row h-100 justify-content-center align-items-center">
                    <form onSubmit={this.auth}>
                        <img src={logo} className="img-thumbnail"/>
                        <div className="form-group">
                            <label>Email</label>
                            <input value={this.state.email} onChange={this.onEmailChange} type="email"
                                   className="form-control" placeholder="Enter E-mail address"/>
                        </div>

                        <div className="form-group">
                            <label>Password</label>
                            <input value={this.state.password} onChange={this.onPasswordChange} type="password"
                                   className="form-control" placeholder="Enter Password"/>
                        </div>

                        <button type="submit" className="btn btn-primary col-sm-12">Login</button>
                    </form>
                </div>
            </div>
        );
    }
}

export default Login;

Просто освежите мой разумнемного, пожалуйста, я видел много статей, делающих основной макет со ссылками, но в начале я хочу показать в качестве стартового экрана только мой компонент Login без ссылок меню вверху. Затем перейдите к моему основному приложению со ссылками, если вход был успешным.

Answer 1

Если вы хотите защитить определенные маршруты в своем приложении, то вам действительно нужно сделать что-то вроде реакции на обучение с защищенными маршрутами, найденными здесь Рабочий процесс React Auth . Но если вы хотите защитить все свое приложение, вы можете просто сделать простой оператор if в корне вашего приложения. Если нет аутентификации, верните логин, иначе верните приложение следующим образом:

Пример CodeSandbox

const App = () => {

  //Your authentication logic goes here or in a context component

  // If authentication is false then just return the login component
  if(!auth) return <Login/>

  // If authentication is successful then return the app
  return (
    <div className="App">
      <BrowserRouter>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/page">Page</Link>
          </li>
        </ul>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/page" component={Page} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

Это, очевидно, упрощенная версия, как это сделать, ноЯ хотел, чтобы это было просто, чтобы вы могли видеть, как это делается легко. Вы действительно должны хранить токен аутентификации в хранилище контекста или в другом месте, чтобы вы могли легко использовать токен. Кроме того, если вы хотите использовать некоторые общедоступные маршруты, вы должны изучить ссылку выше, чтобы реагировать на тренировки. Но если вы хотите просто защитить все приложение, тогда вы можете просто сделать оператор if, как указано выше.