React js. create-react-app. Как создать несколько страниц?

235

03 сентября 2018, 22:10

Не понимаю, как добавить вторую страничку в реакт приложение, созданное react-create-app. На данный момент в проекте есть node_modules папка, src с файлами .js и public с index.html, остальное я удалил. Мне нужно чтобы у меня было три страницы: 1)С регистрацией; 2)Со входом; 3)Список участников. Т.е. приложение сосредоточено на работе с одной страничкой, а мне хотелось бы как-то иметь отдельные роуты(если возможно) ну или хотя бы просто переходы по кликам от одного файла js к другому. Код index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import List from './comps/List';
class Index extends React.Component {
    render () {
        return
    }
}
ReactDOM.render(
    <List />,
    document.getElementById('root')
);
export default Index;

Код index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
    </div>
</body>
</html>

Answer 1

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

После этого вы можете, например, использовать пакет react-router-dom для навигации между компонентами. То есть, вы можете добавить в app.js

import { Router, Route } from "react-router-dom";

После чего поправить ваш App компонент следующим образом

const App = () => <div className="App">
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route exact path="/users" component={Users} />
      <Route exact path="/login" component={Login} />
    </div>
  </Router>
</div>;

где Home, Users, Login - ваши компоненты. Соответственно, после этого у вас будут рендериться компоненты в соответствии с текущим урлом.

После этого вам надо будет уже добавлять возможность регистрации, аутентификации, автоматического редиректа если юзер не залогинен и прочее, но это уже отдельные вопросы, я думаю.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Получение html через WebView

Имеется кнопка, по нажатию которой происходит отображение HTML страницыПрочитал про WebView и WebEngine, и не понятно, как получить html код страницы...

230

HTML