Как создать приложение с несколькими страницами, используя

Я создал одностраничное веб-приложение с помощью команды js. Я использовал webpack для создания пакета всех компонентов. Но теперь я хочу создать много других страниц. Большинство страниц связаны с API-вызовом. т.е. в index.html, я отобразил содержимое с API. Я хочу вставить содержимое в другую страницу, анализируя данные из API. Webpack сжимает все, что реагирует, в файле bundle.js. Однако конфигурация webpack следующая:

const webpack = require('webpack');

var config = {
entry: './main.js',

output: {
    path:'./',
    filename: 'dist/bundle.js',
},

devServer: {
    inline: true,
    port: 3000
},

module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
},

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('production')
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    })
]
}

module.exports = config;

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

Ответ 1

(Убедитесь, что установлен маршрутизатор с использованием npm!)

Чтобы использовать реактивный маршрутизатор, вы делаете следующее:

Создайте файл с маршрутами, определенными с использованием компонентов Route, IndexRoute
Внесите Router (с компонентом 'r'!) в качестве компонента верхнего уровня для вашего приложения, передавая маршруты, определенные в файле маршрутов, и тип истории (hashHistory, browserHistory)
Добавьте {this.props.children}, чтобы убедиться, что там будут отображаться новые страницы.
Для изменения страниц используйте Ссылка.

Шаг 1 routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';

/**
 * Import all page components here
 */
import App from './components/App';
import MainPage from './components/MainPage';
import SomePage from './components/SomePage';
import SomeOtherPage from './components/SomeOtherPage';

/**
 * All routes go here.
 * Don't forget to import the components above after adding new route.
 */
export default (
  <Route path="/" component={App}>
    <IndexRoute component={MainPage} />
    <Route path="/some/where" component={SomePage} />
    <Route path="/some/otherpage" component={SomeOtherPage} />
  </Route>
);

Шаг 2 точка входа (где вы делаете инъекцию DOM)

// You can choose your kind of history here (e.g. browserHistory)
import { Router, hashHistory as history } from 'react-router';
// Your routes.js file
import routes from './routes';

ReactDOM.render(
  <Router routes={routes} history={history} />,
  document.getElementById('your-app')
);

Шаг 3 Компонент App (props.children)

В рендеринге для вашего компонента приложения добавьте {this.props.children}:

render() {
  return (
    <div>
      <header>
        This is my website!
      </header>

      <main>
        {this.props.children}
      </main>

      <footer>
        Your copyright message
      </footer>
    </div>
  );
}

Шаг 4 Используйте ссылку для навигации

В любом месте в функции рендеринга компонента возвращайте значение JSX, используйте компонент Link:

import { Link } from 'react-router';
(...)
<Link to="/some/where">Click me</Link>

Ответ 2

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

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Application from './components/Application';

const root = document.getElementById('someElementIdHere');

ReactDOM.render(
  <Application />,
  root,
);

Ваш компонент <Application/> будет содержать следующие части вашего приложения. Вы заявили, что хотите разные страницы, и это заставляет меня думать, что вы используете какую-то маршрутизацию. Это может быть включено в этот компонент вместе с любыми библиотеками, которые должны быть вызваны при запуске приложения. react-router, redux, redux-saga, react-devtools приходят на ум. Таким образом, вам нужно будет всего лишь добавить одну точку входа в конфигурацию вашего веб-пакета, и все будет в некотором роде.

Когда вы настроите маршрутизатор, у вас будет возможность установить компонент для конкретного согласованного маршрута. Если у вас был URL /about, вы должны создать маршрут в любом используемом вами пакете маршрутизации и создать компонент About.js с любой необходимой вам информацией.

Ответ 3

Для веб-приложений я рекомендую вам прочитать эти два примера:

Резюме реализации:

1 - Добавить react-router-dom:

пряжа

yarn add react-router-dom

или NPM

npm install react-router-dom

2 - Обновите файл index.js:

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
  ), document.getElementById('root')
);

3 - Создайте главный компонент и назовите там свои страницы (у вас также должны быть уже созданы компоненты страниц):

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import Home from '../pages/Home';
import Signup from '../pages/Signup';

const Main = () => {
  return (
    <Switch>
      <Route exact path='/' component={Home}></Route>
      <Route exact path='/signup' component={Signup}></Route>
    </Switch>
  );
}

export default Main;

4 - Добавьте основной компонент в файл App.js:

function App() {
  return (
    <div className="App">
      <Navbar />
      <Main />
    </div>
  );
}

5 - Добавить ссылку на ваши страницы где-нибудь

<Link to="/signup">
  <button variant="outlined">
    Sign up
  </button>
</Link>