diff --git a/README.md b/README.md index 20ca00c..a2c17b7 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ An Option Payoff visualizing tool, that allows you to create strategies, add and 2. Select/Unselect option legs with the checkbox. 3. Save modified (custom) strategies as new, or update saved strategies. 4. Persistence of saved strategies through local storage. -5. URL based routing, to select a strategy from the URL with 404 error mitigation. (Example - https://anshuthopsee.github.io/option-payoff/Bull-Call-Spread). The strategy name is case sensitive and all the words should be joined with "-" (hyphen). +5. Hash routing, to select a strategy from the URL without throwing a 404 error. (Example - https://anshuthopsee.github.io/option-payoff/#/Bull-Call-Spread). The strategy name is case sensitive and all the words should be joined with "-" (hyphen). 6. Numeric input value range: 0.1 >= value < 10000. ## To be added diff --git a/index.html b/index.html index 1a018d2..37f8f4b 100644 --- a/index.html +++ b/index.html @@ -5,28 +5,6 @@ Option Payoff - Visualize Payoff for Preset & Custom Strategies. -
diff --git a/public/404.html b/public/404.html deleted file mode 100644 index 943064b..0000000 --- a/public/404.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - Option Payoff - Visualize Payoff for Preset & Custom Strategies. - - - - - \ No newline at end of file diff --git a/src/Contexts/CustomPresetsContextProvider.jsx b/src/Contexts/CustomPresetsContextProvider.jsx index eccd15b..2d1795a 100644 --- a/src/Contexts/CustomPresetsContextProvider.jsx +++ b/src/Contexts/CustomPresetsContextProvider.jsx @@ -38,9 +38,9 @@ const CustomPresetsContextProvider = ({ children }) => { const precedingPresetIndex = index-1; if (precedingPresetIndex > -1) { const precedingPresetName = customPresets[precedingPresetIndex].name; - navigate(`/${precedingPresetName}`); + navigate(`#/${precedingPresetName}`); } else { - navigate("/Bull-Put-Spread"); + navigate("#/Bull-Put-Spread"); }; }; setCustomPresets(customPresets.filter((preset, i) => index !== i)) diff --git a/src/components/Presets/BullCallSpreadSVG.jsx b/src/components/Presets/BullCallSpreadSVG.jsx index 2597bb3..592ecfb 100644 --- a/src/components/Presets/BullCallSpreadSVG.jsx +++ b/src/components/Presets/BullCallSpreadSVG.jsx @@ -27,7 +27,7 @@ const BullCallSpreadSVG = () => { justifyContent: "center" } } - onClick={() => navigate("/Bull-Call-Spread")} + onClick={() => navigate("#/Bull-Call-Spread")} > {/* Background */} diff --git a/src/components/Presets/BullPutSpreadSVG.jsx b/src/components/Presets/BullPutSpreadSVG.jsx index 013ad0b..ee2c6cd 100644 --- a/src/components/Presets/BullPutSpreadSVG.jsx +++ b/src/components/Presets/BullPutSpreadSVG.jsx @@ -26,7 +26,7 @@ const BullPutSpreadSVG = () => { justifyContent: "center" } } - onClick={() => navigate("/Bull-Put-Spread")} + onClick={() => navigate("#/Bull-Put-Spread")} > {/* Background */} diff --git a/src/components/Presets/CustomSVG.jsx b/src/components/Presets/CustomSVG.jsx index 25c36b5..2fa688d 100644 --- a/src/components/Presets/CustomSVG.jsx +++ b/src/components/Presets/CustomSVG.jsx @@ -46,7 +46,7 @@ const CustomSVG = ({ name, index }) => { justifyContent: "center" } } - onClick={() => navigate(`/${joinWords(name)}`)} + onClick={() => navigate(`#/${joinWords(name)}`)} > diff --git a/src/components/Presets/ShortStraddleSVG.jsx b/src/components/Presets/ShortStraddleSVG.jsx index d74411d..029b24c 100644 --- a/src/components/Presets/ShortStraddleSVG.jsx +++ b/src/components/Presets/ShortStraddleSVG.jsx @@ -26,7 +26,7 @@ const ShortStraddleSVG = () => { justifyContent: "center" } } - onClick={() => navigate("/Short-Straddle")} + onClick={() => navigate("#/Short-Straddle")} > {/* Background */} diff --git a/src/components/Presets/ShortStrangleSVG.jsx b/src/components/Presets/ShortStrangleSVG.jsx index 9afd5c8..1ed4531 100644 --- a/src/components/Presets/ShortStrangleSVG.jsx +++ b/src/components/Presets/ShortStrangleSVG.jsx @@ -26,7 +26,7 @@ const ShortStrangleSVG = () => { justifyContent: "center" } } - onClick={() => navigate("/Short-Strangle")} + onClick={() => navigate("#/Short-Strangle")} > {/* Background */} diff --git a/src/hooks/utils.js b/src/hooks/utils.js index 1bcc381..126f085 100644 --- a/src/hooks/utils.js +++ b/src/hooks/utils.js @@ -11,7 +11,7 @@ export const splitWords = (hyphenSeparatedString) => { }; export const getPathName = (location) => { - let pathName = location.pathname.slice(1); + let pathName = location.hash.slice(2); const indexOfSlash = pathName.indexOf('/'); if (indexOfSlash !== -1) {