Code Monkey home page Code Monkey logo

tripolskypetr / react-history-switch Goto Github PK

View Code? Open in Web Editor NEW
3.0 2.0 0.0 1.63 MB

Self-hosted context-free Switch routing component for History.js library (React). The library was created to transfer navigation responsibility from a view into Mobx state container (MVC). Also can be used separately as a self-hosted router

Home Page: https://github.com/react-declarative/react-declarative

JavaScript 12.04% HTML 0.94% TypeScript 87.02%
react router route routing mobx mvc observable history location search-params

react-history-switch's Introduction

Contact data

Telegram: @ptr98
Email: [email protected]

Other links

StackOverflow: https://stackoverflow.com/users/7388307
Behance: https://www.behance.net/tripolskypetr

Tech Skills

  • PWA Architect

OOP, FP, SOLID, Design Patterns, Serverless Architecture, REST API

  • Data Scientist

NumPy, SymPy, matplotlib, pandas, SciPy, scikit-*

  • DeFi

Binance APIs, ERC721A, ERC20, OpenZeppelin, Geth, MetaMask, Infura

See Also

I co founded a startup centred around the implementation of an esports platform where AI is acting as a casino croupier, determining the winner of cybersport competitions based on video captured from the user's screen during a match

I have a serious contribution to the open source movement on GitHub. I also have StackOverflow account.

react-history-switch's People

Contributors

tripolskypetr avatar

Stargazers

avatar avatar avatar

Watchers

avatar avatar

react-history-switch's Issues

Parameters not handled correctly

Hello, I am opening this issue mainly to allow others who come across this to be aware of the problem, but I am not expecting that it be fixed.

The issue is that the library only supports having a single route with parameters. An example:

const First = (params) => {
  console.log(params);
  return null;
};
const Second = (params) => {
   console.log(params);
  return null;
};
const Third = (params) => {
  console.log(params);
  return null;
};

const items = [
  {
    path: "/first/:param1",
    component: First,
  },
  {
    path: "/second/:param2",
    component: Second,
  },
  {
    path: "/third/:param3",
    component: Third,
  },
];

export const Routes = () => {
  return <Switch items={items} history={history} />;
};

If one opens the URL /third/123, it will output:

{param1: '123', param2: undefined, param3: undefined}

instead of the expected:

{param3: '123'}

I believe this is due to const keys: Key[] = []; being in the outer lexical scope instead of inside items.reduce, but I haven't tried it.

I did end up using the library url-pattern instead.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.