प्रतिक्रिया-राउटर में प्रतिशत (%) साइन का उपयोग करना: आईडी

Question

मैं प्रतिक्रिया-राउटर आईडी में प्रतिशत चिह्न का उपयोग करने का प्रयास कर रहा हूं। यूआरआई में % का उपयोग करने के लिए वर्जित है, मुझे इस प्रतिशत चिह्न का उपयोग करने में सक्षम होने के लिए मैन्युअल रूप से मेरे यूआरआई को एन्कोड करना होगा। एक लिंक का उपयोग करना, इसलिए मैं encodeURI समारोह यूआरआई सांकेतिक शब्दों में बदलना करने के लिए उपयोग: मेरे पृष्ठ के स्रोत कोड में

<Link to={`/r/${encodeURI(my_str_with_unencoded_percent_sign)}`} > 

, मैं उस लिंक %25 और नहीं % का उपयोग करता है देख सकते हैं।

फिर भी, लिंक पर क्लिक करते समय, मुझे त्रुटि मिलती है "URIError: malformed URI अनुक्रम" (मेरे कोड के दूसरे भाग में, मेरे पास <Match pattern="/r/:id" … है)।

मैंने क्या गलत किया? ऐसा लगता है कि यूआरएल को से पहले डीकोड किया गया है, जो प्रतिक्रिया-राउटर के पारसेपरम फ़ंक्शन पर पारित किया जा रहा है, जो इसे दूसरी बार डीकोड करने का प्रयास करता है, जो इस त्रुटि को जन्म देता है।

मुझे https://github.com/ReactTraining/history/issues/461 या https://github.com/ReactTraining/history/issues/461 जैसे मुद्दे मिले, लेकिन मुझे इस समस्या का कोई समाधान नहीं मिला: मैं प्रतिक्रिया-राउटर में एक प्रतिशत चिह्न का उपयोग कैसे कर सकता हूं: आईडी?

Answer 1

यहां रीमार्केटिंग प्रशिक्षण द्वारा प्रदान किए गए URL Parameters उदाहरण का एक संशोधित संशोधित संस्करण है।

नीचे अपनी अनुक्रमणिका.जेएस में पेस्ट करें और इसे देखने के लिए इसे जांचें। मैं आपके लिए इसका एक कोडैंडबॉक्स प्रदान करने जा रहा था, लेकिन उनके आंतरिक मार्ग में ऐसे मुद्दे हैं जो यूरी एन्कोडेड% संकेतों के साथ भी काले रंग में जाने का कारण बनते हैं ... मैंने स्थानीय रूप से इसका परीक्षण किया और एक आकर्षण की तरह काम किया।

import React from "react"; 
import { render } from "react-dom"; 
import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 

const ParamsExample =() => (
    <Router> 
    <div> 
     <h2>Accounts</h2> 
     <ul> 
     <li><Link to={`/${encodeURI("%netflix")}`}>Netflix</Link></li> 
     <li><Link to="/zillow-group">Zillow Group</Link></li> 
     <li><Link to="/yahoo">Yahoo</Link></li> 
     <li><Link to="/modus-create">Modus Create</Link></li> 
     </ul> 

     <Route path="/:id" component={Child} /> 
    </div> 
    </Router> 
) 

const Child = ({ match }) => (
    <div> 
    <h3>ID: {match.params.id}</h3> 
    </div> 
) 

render(<ParamsExample />, document.getElementById("react"));