React + Antd 如何開發(fā)非單頁應(yīng)用（非spa）

剛接觸React 和 Antd，大多數(shù)都是用webpack生成spa單頁應(yīng)用，利用路由實(shí)現(xiàn)多個頁面。
這樣的應(yīng)用網(wǎng)址實(shí)現(xiàn)是一個頁面，而我想開發(fā)那種非spa應(yīng)用。
就是還是原來的傳統(tǒng)url。
如

http://xxx.com/news/1.html
http://xxx.com/news/2.html

而不是

http://xxx.com/#/1
http://xxx.com/#/2

這種如何實(shí)現(xiàn)？

回答

編輯回答

夢若殤

React本身就是一個簡單的view層實(shí)現(xiàn)，后來是為了充分利用react的優(yōu)勢開發(fā)才配套了周邊技術(shù)棧redux、webpack、路由等等去實(shí)現(xiàn)SPA。
當(dāng)然也可以是實(shí)現(xiàn)你要的那種，保持以往的開發(fā)風(fēng)格。你只需要在每個html中引用react這個js庫就行了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>first</title>
</head>
<body>
    <div id="main">

    </div>

    <script src="../react15.6.1.min.js"></script>
    <script src="../react-dom15.6.1.min.js"></script>
    <script src="../browser.min.js"></script>
    <script type="text/babel" src="./hello.js"></script>
</body>
</html>

這種就能直接實(shí)現(xiàn)你要的。

2017年5月11日 20:58

編輯回答

故林

使用 react-router 4
下面是一個多頁應(yīng)用，分主頁和登錄頁面主頁是單頁應(yīng)用
圖片描述

2017年7月10日 22:01

編輯回答

莓森

剛好想到了我之前做的一個項(xiàng)目 demo
你可以參考一下。
另外，我們還一個初始化就實(shí)現(xiàn)了多頁應(yīng)該的initial project, 提供參考。

2017年9月4日 23:40

編輯回答

冷咖啡

這是經(jīng)過測試后可以用的。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>Antd</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
  <link rel="stylesheet"  />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.4.3/antd.min.js"></script>
</head>

<body>
  <div id="message1">xx</div>
  <script type="text/babel" src="button.js"></script>
</body>

</html>

button.js

// import { Button, Radio, Icon } from 'antd';
ReactDOM.render(
  <div>
    <antd.Button type="primary">Primary</antd.Button>
    <antd.Button>Default</antd.Button>
    <antd.Button type="dashed">Dashed</antd.Button>
    <antd.Button type="danger">Danger</antd.Button>
    <antd.Input placeholder="Basic usage" />
    <antd.Switch defaultChecked />
    <antd.TimePicker defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />
  </div>
, document.getElementById('message1'));

2017年8月27日 22:41