问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

React + Antd 如何开发非单页应用（非spa）

头像
ifu25
    10972432

    刚接触React 和 Antd，大多数都是用webpack生成spa单页应用，利用路由实现多个页面。
    这样的应用网址实现是一个页面，而我想开发那种非spa应用。
    就是还是原来的传统url。
    如

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

    而不是

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

    这种如何实现？

    reactantd
    阅读 5.3k
    4 个回答
    得票最新
    头像
    Allan91
      2.3k32545
      ✓ 已被采纳

      React本身就是一个简单的view层实现，后来是为了充分利用react的优势开发才配套了周边技术栈redux、webpack、路由等等去实现SPA。
      当然也可以是实现你要的那种，保持以往的开发风格。你只需要在每个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>

      这种就能直接实现你要的。

      头像
      _Suqin
        714568113

        使用 react-router 4
        下面是一个 多页应用，分 主页和登录页面 主页是单页应用
        图片描述

        头像
        ifu25
          10972432

          这是经过测试后可以用的。

          <!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" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.4.3/antd.min.css" />
  <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'));
          头像
          小翼
            5.9k3627

            刚好想到了我之前做的一个项目 demo
            你可以参考一下。
            另外，我们还一个初始化就实现了多页应该的initial project, 提供参考。

            查看全部 4 个回答
            推荐问题