Страница входа отделена от одностраничного приложения (SPA) в ReactJS

Я разрабатываю одностраничное приложение (SPA) в ReactJS и хотел бы знать, как разместить страницу входа на отдельной странице.

Я использую create-react-app в качестве основы для своего приложения, и в настоящее время я определяю шаблон для своего SPA в файле App.js и каждый компонент в другом файле .js: Page1.js, Page2.js и т. д. Я использую react-router-dom (V ^ 4.2 .2) для маршрутизации моего приложения.

Мой App.js файл:

//node_modules (using ES6 modules)
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

//others
import { Home } from './pages/Home.js';
import { Page1 } from './pages/Page1.js';
import { Page2 } from './pages/Page2.js';

//App variables
const { Content, Footer, Sider } = Layout;

class App extends Component {
  render() {
    return (
      <Router>
        <Layout>
          <Sider>
             //some code
          </Sider>
          <Layout>
            <Header>
             //some code
            </Header>
            <Content>
              <Route exact path="/" component={Home}/>
              <Route path="/page1" component={Page1}/>
              <Route path="/page2" component={Page2}/>
            </Content>
            <Footer>
             //some code     
            </Footer>
          </Layout>
        </Layout>
      </Router>
    );
  }
}

export default App;

reactjs react-router-dom react-router single-page-application login
person Julia    schedule 13.12.2017    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Прежде чем перейти к вашим кодам, обратите внимание, что

Route в react-route-dom (он же React Router v4 и выше) — это просто Component, где это может быть StatelessComponent или ComponentClass, которые отображают представление. вы можете сослаться здесь,
https://reacttraining.com/react-router/web/guides/philosophy

В вашем вопросе,

Я хотел бы знать, как я могу иметь страницу входа в отдельную страницу

если вы имели в виду, что хотите отобразить представление Login без Layout, тогда вы можете сделать это так,

в App.js

import Main from './Main';    // Your original <App /> page
import Login from './Login';  // Your new <Login /> page  

// In your App component  

<Router>  
  <Switch>
    <Route exact path="/" component={Main} />  
    <Route path="/login" component={Login} /> 
  </Switch>
</Router>

// Export your App component

Есть несколько моментов, которые я хотел бы упомянуть здесь,

  1. Я добавляю <Switch>, который содержит один или несколько <Route />, так как это гарантирует, что ваше приложение будет отображать только одно представление из Route (помните, что <Route /> — это просто компонент, который отображает представление на основе вашего пути, совпадающего с URL-адресом). Поэтому вы можете заключить <PageABC /> в <Switch />, иначе все представления будут отображаться в фоновом режиме.
    Ссылка: https://reacttraining.com/react-router/web/api/Switch
  2. Попробуйте создать новый компонент <Main /> и оберните исходный макет компонента <App /> во вновь созданный <Main />. Создайте компонент <Login /> с макетом страницы входа.
  3. Он выполнит работу по разделению вашего основного контента со страницей входа, но ничего не сделает для аутентификации пользователя. Вы можете свободно перейти на страницу входа, посетив /login по URL-адресу, и вернуться на главную страницу по / по URL-адресу. Если вы хотите создать маршрут Авторизованный и неавторизованный, вы можете ознакомиться с этим руководством Все о React Router 4
  4. При желании вы можете добавить <Redirect to="/somePublicUrl" />, чтобы ваше приложение всегда отображало какое-то представление, если URL-адрес не соответствует какому-либо пути маршрута.

Я надеюсь, что это помогает. Дайте мне знать, если что-то не укладывается в голове.

person loala.js    schedule 13.12.2017
comment
Хороший ответ, я понял, что вы имели в виду, увидев этот пример: avinmathew.com/ несколько макетов-с-реагированием-маршрутизатором-v4 - person cass; 07.06.2018
comment
Я реализовал этот метод, и он работает, однако теперь путь /page1 работает только с реагирующей ссылкой. Если вы введете /page1 в браузере, он ничего не отобразит - person GavinBelson; 21.03.2019
comment
У меня такой же результат, как у @GavinBelson, мой маршрут по умолчанию / работает, но я проваливаюсь на свою страницу 404 для любого другого маршрута (например, /page1) - person user210757; 27.09.2019
comment
Вот пример того, как это решение не работает для меня - я что-то упустил? codesandbox.io/s/react-router-redirects-auth- f582f?из встроенного - person user210757; 30.09.2019