when I first come into contact with React and Antd, most of them use webpack to generate spa single-page applications and use routing to achieve multiple pages.
this kind of application URL implementation is a page, and I want to develop that kind of non-spa application.
is still the original traditional url.
such as
http://xxx.com/news/1.html
http://xxx.com/news/2.htmlinstead of
http://xxx.com/-sharp/1
http://xxx.com/-sharp/2how to achieve this?
use react-router 4
the following is a multi-page application, divided into home page and login page, the home page is a single page application
this can be used after testing.
<!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')); happens to think of a project I did earlier demo
you can refer to.
in addition, we also have an initialization to implement the initial project for reference.
React itself is a simple view layer implementation, and later, in order to make full use of the advantages of react, it is equipped with the surrounding technology stack redux, webpack, routing and so on to implement SPA. Of course,
can also be the kind of implementation you want, maintaining the previous development style. All you have to do is reference react, the js library, in each html.
<!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>this can directly achieve what you want.
Previous: How does Filter come up with the Junzi number in a set of numbers?
Next: Mysql database garbled
...
I define an array in js. does anyone know, thank you ...
this is the effect ...
In Ant Design Input has textarea Select has multiple selection and tags mode but in Ant Design Pro, Select sets multiple selection mode has no effect I don t know why, did he do subtraction ...
1. Problem: when using antd s Modal.confirm, put an Input, to update the txNote property in state. But as long as there is a confirm, all you get is the previous state, instead of the updated state 2 entered in the confirm. Screenshot: 3. From...
step 1, in parent component: constructor(props) { super(props); this.state = { checkState: checked , enable:true } } this.setState({ checkState: unChecked , enable:false }) step 2: before calling the subcompon...
there are two child components in a parent component, which are component A, component B. Component An is the name of a list of data, and component B is a data form formed by a single piece of data of component A. how to make component A re-render after ...
...
linux node 8.11 after the execution of the npm start project can run, but the file changes will not automatically compile the ant-design used ...
when antd tree sets defaultExpandAll to true, it expands by default the first time it is initialized. When the tree is collapsed, the window is closed and the window is opened again, the tree remains collapsed. Then I use expandedKeys to control the nod...
how to center the numbers in the picture as a whole, but each number is aligned to the right, that is, the percent sign ...
< H2 > Business scenario < H2 > A table, can be modified for each tr. The modification is to pop up a < Modal destroyOnClose modifyData= {data} > , and a Form in the Modal. Here, use setFieldsValue to backfill the form. Since Modal, is mounted ...
how to implement the parity line of the Table component the color is different after hover! Beg urgently! Thank you ...
when I initialize the Input component of the Form form, I set the initalValue property of getFieldDecorator . This initial value depends on the value stored in Redux , and the Redux value is the data passed in the background. the problem now i...
what if the input box is empty and the fieldsValue obtained is undifined, if it is not required? ...
as shown in the figure, I did not manually control the column width, and the result is like this, but I feel that even if the column width is fixed, then there will still be many rows if the data in < td > is too long. Is there any good way to deal with ...
in common scenarios in the background of administrators, the data is listed in table, paged and conditionally searched. previously made an admin that is written by react, so it doesn t matter if all the data are obtained asynchronously. but now you ne...
The default height of the Table list in antd is not good-looking. If you want to adjust the height, you will find that if there is too much content, it will not automatically wrap, the content will overlap, and adding the auto-wrapping attribute white-s...
input WrappedEditStoreForm ...
how to trigger an action in a child component through the parent component in the React. import {Modal} from antd <Modal visible={this.state.componentModalVisible} title="" onOk={this.handleOk} onCancel={this.handleCancel} ...