Skip to main content

how to use react Router module to create a single page application


Routing is one of the most important part of every react application especially when you have to deal with single page application.

 you can add routing in react using

react-router-dom package

key features and some points to remember about routing

1. Routing  start with Router tag and only one single html elements allowed inside Router tag.
2. Routing history manage by history module  more about routing history
   https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md

3. there are two type of routing in react js HashRouter and BrowserRouter.In most cases BrowserRouter  is ok when you have to deal with dynamic server side page's but HashRouter  is useful dealing with static website pages.
more difference =>https://stackoverflow.com/questions/51974369/hashrouter-vs-browserrouter

4. you can pass data dynamically Routing please check the below links


more details below links



working link-->https://stackblitz.com/edit/react-zhwkcb

more about react router = >https://reacttraining.com/react-router/web/example/basic

Comments

Post a Comment

Popular posts from this blog

Better Memory management with PixiJS or How to manage cpu and cpu memory in PixiJS.

PixiJS is my favorite framework when i am looking for a web games specially for mobile or desktop  PixiJS is fast blazing fast and you can get a decent FPS even on older device.   so here is my optimization techniques for PixiJs 1. manage your sprites in a better way use spritesheet to reduce the draw calls create big sprite sheet which contain multiple sprites can be draw in gpu with a single draw call. use TexturePacker  https://www.codeandweb.com/texturepacker  best tool when its comes to spritesheet 2. for floating point calculation round off calculation for example let  speed = 0.75 ; let  position = 100 ; console . log ( Math . round ( speed * position )) 3. don't create very big canvas when u need a big canvas size game just try to create a small canvas and translate it. 4. its very important one managing TextureCache in memory you can get all TextureCache list by using  Object.entries(PIXI.utils.TextureCache); so even you use ap...
Post a Comment
Read more

adding particles Effect in pixijs using https://pixijs.io/pixi-particles-editor/

adding particle in pixijs is very easy using the below tool more information can be found below https://github.com/pixijs/pixi-particles https://pixijs.io/pixi-particles-editor/ required packages  /// < reference path = "node_modules/pixi-particles/ambient.d.ts" /> import 'pixi-particles' code of particle delcare a     global variable   private emitter ?: Emitter ; const img = PIXI . Texture . from ( "./assets/images/particle.png" ); this . emitter = new Emitter ( this ,[ img ],{ "alpha" : { "start" : 0.62 , "end" : 0.39 }, "scale" : { "start" : 0.1 , "end" : 0.9 , "minimumScaleMultiplier" : 1.25 }, "color" : { "start" : "#ffff8f" , "end" : ...
Post a Comment
Read more