All Projects → liupeijun → react-router-v4-maizuo

liupeijun / react-router-v4-maizuo

Licence: MIT license
react+react-router-4.0版本 单页面应用实战

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to react-router-v4-maizuo

gorecipe
Aplikasi web serderhana untuk mencari resep masakan khas indonesia yang dibuat menggunakan ReactJS.
Stars: ✭ 20 (-58.33%)
Mutual labels:  react-router
cnode-react-app
基于react的仿cnode社区项目
Stars: ✭ 17 (-64.58%)
Mutual labels:  react-router
coconat
🍥 StarterKit Builder for rocket-speed App creation on 🚀 React 17 + 📙 Redux 4 + 🚠 Router 5 + 📪 Webpack 5 + 🎳 Babel 7 + 📜 TypeScript 4 + 🚔 Linters 23 + 🔥 HMR 3
Stars: ✭ 95 (+97.92%)
Mutual labels:  react-router
react-mobile-starter
🌈 A starter project structure for React.js app using Dva.
Stars: ✭ 46 (-4.17%)
Mutual labels:  react-router
use-react-router-breadcrumbs
tiny, flexible, hook for rendering route breadcrumbs with react-router v6
Stars: ✭ 170 (+254.17%)
Mutual labels:  react-router
Oud
🎵 The frontend of Oud, an online music streaming service that is a mimic of Spotify with all its functionalities built using ReactJS, React-Router, Bootstrap.
Stars: ✭ 48 (+0%)
Mutual labels:  react-router
vaktija.ba
Web Site
Stars: ✭ 19 (-60.42%)
Mutual labels:  react-router
deeperience-react-native
React native boilerplate made by Deeperience
Stars: ✭ 85 (+77.08%)
Mutual labels:  react-router
React-Native-Showcase
Best List of Open Source / Examples / Free / Case Study & Featured Template React Native Apps
Stars: ✭ 39 (-18.75%)
Mutual labels:  react-router
elegant-react-ssr
Server-side rendering with create-react-app, React Router v4, Helmet, Redux, and Thunk boilerplate, without ejecting CRA
Stars: ✭ 16 (-66.67%)
Mutual labels:  react-router
gavinanthony.com
gavinanthony.com
Stars: ✭ 34 (-29.17%)
Mutual labels:  react-router
ReactCnodeJS
☀️React 初/中级项目,CnodeJS社区重构 (a junior project, rewrite cnodejs.org ) 🌟 DEMO:
Stars: ✭ 66 (+37.5%)
Mutual labels:  react-router
nav-state-react-router
📕 Article Repo: Maintaining Navigation State with React-Router and Redux
Stars: ✭ 18 (-62.5%)
Mutual labels:  react-router
molecule
⚛️ –  – ⚛️ Boilerplate for cross platform web/native react apps with electron.
Stars: ✭ 95 (+97.92%)
Mutual labels:  react-router
react-ssr
从零搭建一个react-ssr框架 解决页面js事件 样式同构 服务器客户端路由 数据注水脱水等问题
Stars: ✭ 42 (-12.5%)
Mutual labels:  react-router
reactube-client
A clone Youtube Web Player using React Provider Pattern, React Context and Typescript
Stars: ✭ 92 (+91.67%)
Mutual labels:  react-router
create-new-app
Easily generate a new fully-equiped React project, optionally with Redux, React Router, Express, or MongoDB.
Stars: ✭ 26 (-45.83%)
Mutual labels:  react-router
transitionable-routes
Perform transitions when changing routes with React Router
Stars: ✭ 26 (-45.83%)
Mutual labels:  react-router
nextjs-react-router
A demonstration of how to use React Router inside Next.js
Stars: ✭ 64 (+33.33%)
Mutual labels:  react-router
book-fullstack-react
Fullstack React: The Complete Guide to ReactJS and Friends by Anthony Accomazzo
Stars: ✭ 100 (+108.33%)
Mutual labels:  react-router

react-router-v4-maizuo

React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念。此项目是正是基于react router-v4.0的最佳实践

说明

 这个项目是关于 react+react-router-4.0版本+ES6+webapck 单页面应用实战

 webpack-dev-server的反向代理配置,解决前端跨域问题.

如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢! ^_^

或者您可以 "follow" 一下,我会继续开源项目

如有问题请在 Issues 中提,或者您发现问题并有非常好的解决方案,欢迎 PR 👍

项目运行(nodejs 6.0+)

# 1. git clone [email protected]:liupeijun/react-router-v4-maizuo.git

# 2. 进入 目录, 安装依赖, 启动webpack dev server

cd react-router-v4-maizuo 

cnpm install(******因为使用了sass,为了顺利完成安装,最好使用cnpm install******)

npm run dev  (开发环境)

效果演示

 

路由配置

    const router = (
      <Router>
        <App>
          <Switch> {/*Renders the first child <Route> or <Redirect> that matches the location.*/}
          <Route path="/home" component={Home} />
          <Route path="/film" render={()=>
            <Film>
              <Switch>{/*Renders the first child <Route> or <Redirect> that matches the location.*/}
                 <Route path="/film/now-playing" component={NowPlaying}/>
                 <Route path="/film/coming-soon" component={ComingSoon}/>
                 <Redirect from="/film" to="/film/now-playing"/> {/*重定向*/}
              </Switch>
            </Film>
          }>
          </Route>
          <Route path="/cinema" component={Cinema}>
          </Route>
          <Route path="/me" component={Me}>
          </Route>
          <Route path="/card" component={Card} >
          </Route>
          <Route path="/detail/:kerwinId" render={props=>
              <Detail {...props}/>
          }>
          </Route>
          <Redirect from="/" to="/home"/> {/*重定向*/}
          </Switch>
        </App>
      </Router>
    )

待办事项

 其他页面完善  引入redux管理状态

License

MIT

Copyright (c) 2016-present, Kerwin Liu

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].