리액트를 사용하여 여러 페이지 앱을 만드는 방법

리액트를 사용하여 여러 페이지 앱을 만드는 방법

jsreact js를 하여 한 웹 .사용한 적이 있다webpack모든 컴포넌트의 번들을 만듭니다.하지만 지금은 다른 페이지를 많이 만들고 싶어요.되어 있습니다. API 콜의 ,index.html의 콘텐츠를 표시했습니다.APIAPI의 데이터를 해석하는 다른 페이지에 콘텐츠를 삽입하고 싶습니다.은 「」입니다.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

서문

이 답변은 에서 채택된 다이내믹라우팅 어프로치를 사용합니다.react-routerv4+. 다른 답변에서는 이전에 사용되었던 "스태틱 라우팅" 접근 방식을 참조할 수 있습니다.react-router.

솔루션

react-router 훌륭한 해결책입니다.페이지를 컴포넌트로 작성하면 라우터는 현재 URL에 따라 페이지를 스왑합니다.즉, 서버에 새 페이지를 요청하는 대신 원본 페이지를 새 페이지로 동적으로 바꿉니다.

웹 앱의 경우 먼저 다음 두 가지를 읽어보는 것이 좋습니다.

• 전체 튜토리얼
• react-router docs. 라우터의 기능을 보다 잘 이해할 수 있습니다.

일반적인 접근법의 개요:

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 /> {/* The various pages will be displayed by the `Main` component. */}
  </BrowserRouter>
  ), document.getElementById('root')
);

3 - 작성Main:

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> {/* The Switch decides which component to show based on the current URL.*/}
      <Route exact path='/' component={Home}></Route>
      <Route exact path='/signup' component={Signup}></Route>
    </Switch>
  );
}

export default Main;

4 - 추가MainApp.js 삭제:

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

5 - 추가Link를 클릭합니다.

(You must use (사용할 필요가 있습니다.Link부에서react-router-dom instead of just a plain old 평범한 늙은이 대신<a>라우터에 올바르게 작동하려면 라우터를 올바르게 작동하는지 확인하십시오.라우터가 정상적으로 동작하기 위해서).

import { Link } from "react-router-dom";
...
<Link to="/signup">
  <button variant="outlined">
    Sign up
  </button>
</Link>

(npm을 사용하여 react-router를 설치해주세요!

리액트 라우터를 사용하려면 다음 절차를 수행합니다.

1. Route, IndexRoute 컴포넌트를 사용하여 정의된 루트가 있는 파일을 만듭니다.

2. Router 구성 요소('r' 포함)를 앱의 최상위 구성 요소로 주입하여 루트 파일에 정의된 경로와 기록 유형(hashHistory, browserHistory)을 전달합니다.

3. 새 페이지가 렌더링되도록 {this.props.children}을(를) 추가합니다.
4. 링크 컴포넌트를 사용하여 페이지 변경

순서 1 routes.displaces

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)

App 구성 요소의 렌더에서 {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>

이것은 폭넓은 질문이며, 이를 실현하는 방법은 여러 가지가 있습니다.지금까지의 경험으로 볼 때, 다음과 같은 엔트리 포인트 파일이 있는 단일 페이지 애플리케이션은 많이 있었습니다.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필요한 모든 정보를 얻을 수 있습니다.

위의 답변에서 @lucas-andrade: for로 이어집니다.react-router> = 6, = 6,Switch는 존재하지 않습니다(https://github.com/remix-run/react-router/issues/8439) 참조).스텝 3의 내용은 다음과 같습니다.

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

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

const Main = () => {
  return (
    <Routes>
      <Route path='/' element={Home}></Route>
      <Route path='/signup' element={Signup}></Route>
    </Routes>
  );
}

export default Main;

을 사용하다. 파일을 ( 「」는 「 」 。webpack:

{
    entry: {
        outputone: './source/fileone.jsx',
        outputtwo: './source/filetwo.jsx'
    },
    output: {
        path: path.resolve(__dirname, './wwwroot/js/dist'),
        filename: '[name].js'      
    },
}

2개의 됩니다. 즉, 2개의 파일이 생성됩니다.outputone.js ★★★★★★★★★★★★★★★★★」outputtwo.js대상 폴더에 있습니다.

정적 멀티페이징 앱 전용 리액트 프레임워크인 개츠비를 사용할 수도 있다.

언급URL : https://stackoverflow.com/questions/41956465/how-to-create-multiple-page-app-using-react