Single-page app(SPA)

有哪些值得推荐的一页式网站(Single-page app)?

http://pro.weltrade.com/en/

最近开到一下国外网站,一页到底,感觉很高大上,到底是怎么做出来的呢?技术要点是什么???

类似https://www.skypixel.com/,用angular 是不是更便捷,先研究研究

使用 AngularJS 的路由和模板实现单页应用 (Single Page)

DEMO:http://paul-xiao.github.io/spa

刷新页面还有点问题

angularJs ui.router 刷新页面404 处理方法

AngularJS去掉的URL里的#号

修改:nginx.conf

  try_files $uri $uri/ /spa/index.html =404;
 server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        try_files $uri $uri/ /spa/index.html =404;
        }

使用命令行CMD重新加载nginx:

cd nginx
nginx -s reload

 

搞定:

转载于:https://www.cnblogs.com/paul-xiao/p/5148961.html

To create a SPA in React, we can use React Router. Here's an example of how to create a SPA in React with proper navigation: 1. First, create a new React app using `create-react-app`. 2. Install React Router by running the following command in your terminal: ``` npm install react-router-dom ``` 3. In your `src` folder, create a new folder called `pages`. Inside this folder, create a new file for each of your pages. For example, you could create a `Home.js` file and a `About.js` file. 4. In each of your page files, create a React component that represents that page. For example: ```jsx import React from 'react'; function Home() { return ( <div> <h1>Welcome to my website!</h1> <p>Here is some content.</p> </div> ); } export default Home; ``` 5. In your `App.js` file, import `BrowserRouter` from `react-router-dom` and wrap your entire app in it. Then, create a `Switch` component that will render the appropriate page based on the URL. ```jsx import React from 'react'; import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; function App() { return ( <BrowserRouter> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> </ul> </nav> <Switch> <Route path="/about"> <About /> </Route> <Route path="/"> <Home /> </Route> </Switch> </BrowserRouter> ); } export default App; ``` 6. In the example above, we're using `Link` components to create links to our pages, and we're using `Route` components to specify which component should be rendered for each URL. The `Switch` component ensures that only one page is rendered at a time. 7. Start your app by running `npm start` in your terminal. You should see your navigation links and be able to navigate between your pages.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值