Cách tạo ứng dụng nhiều trang bằng cách sử dụng phản ứng

Question

Tôi đã tạo một ứng dụng web trang đơn bằng cách sử dụng phản ứng js. Tôi đã sử dụng webpack để tạo nhóm tất cả các thành phần. Nhưng bây giờ tôi muốn tạo ra nhiều trang khác. Hầu hết các trang đều liên quan đến cuộc gọi API. tức là trong số index.html, tôi đã hiển thị nội dung từ API. Tôi muốn chèn nội dung vào một trang khác phân tích cú pháp dữ liệu từ API. Webpack nén mọi thứ phản ứng trong một tệp là bundle.js. Tuy nhiên, cấu hình của webpack là như sau:

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; 

Bây giờ, tôi đang bối rối loại cấu hình của webpack sẽ cho trang khác hoặc những gì là cách chính xác để xây dựng đa trang ứng dụng sử dụng react.js

Answer 1

Đây là một câu hỏi rộng nhưng có một vài cách bạn có thể đạt được điều này. Theo kinh nghiệm của tôi, tôi đã nhìn thấy rất nhiều ứng dụng trang đơn lẻ có tệp điểm nhập như index.js. Tập tin này sẽ chịu trách nhiệm cho 'bootstrapping' ứng dụng và sẽ là điểm vào của bạn cho webpack.

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, 
); 

phần <Application /> của bạn sẽ chứa các mảnh tiếp theo của ứng dụng của bạn. Bạn đã tuyên bố bạn muốn các trang khác nhau và điều đó dẫn tôi tin rằng bạn đang sử dụng một số loại định tuyến. Điều đó có thể được đưa vào thành phần này cùng với bất kỳ thư viện nào cần được gọi khi bắt đầu ứng dụng. react-router, redux, redux-saga, react-devtools hãy lưu ý. Bằng cách này, bạn sẽ chỉ cần thêm một điểm vào duy nhất vào cấu hình webpack của bạn và mọi thứ sẽ nhỏ xuống theo nghĩa nào đó.

Khi bạn đã thiết lập bộ định tuyến, bạn sẽ có tùy chọn để đặt thành phần thành một tuyến đường phù hợp cụ thể. Nếu bạn có url là /about, bạn nên tạo tuyến đường trong bất kỳ gói định tuyến nào bạn đang sử dụng và tạo thành phần của About.js với bất kỳ thông tin nào bạn cần.

Answer 2

(! Hãy chắc chắn để cài đặt phản ứng-router sử dụng NPM)

Để sử dụng phản ứng-router, bạn thực hiện như sau:

1. Tạo một tập tin với tuyến định sử dụng Route, IndexRoute thành phần

2. Tiêm bộ phận Bộ định tuyến (với 'r'!) làm thành phần cấp cao nhất cho ứng dụng của bạn, chuyển các tuyến được xác định trong tệp tuyến da loại lịch sử (hashHistory, browserHistory)

3. Thêm {} this.props.children để đảm bảo trang mới sẽ được trả lại có
4. Sử dụng Liên kết thành phần để thay đổi trang

Bước 1 tuyến đường.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> 
); 

Bước 2điểm nhập cảnh (nơi bạn làm tiêm DOM của bạn)

// 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') 
); 

Bước 3Thành phần App (props.children)

Trong kết xuất cho thành phần ứng dụng của bạn, hãy thêm {this.props.children}:

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

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

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

Bước 4Sử dụng liên kết để điều hướng

Anywhere trong thành phần của bạn làm cho trở lại giá trị JSX chức năng của, sử dụng thành phần Link:

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