Mit Prozent (%) anmelden react-router: ID

Question

Ich versuche, ein Prozentzeichen in einer React-Router-ID zu verwenden. Da die Verwendung von % in URI verboten ist, muss ich meinen URI manuell codieren, um dieses Prozentzeichen verwenden zu können. Mit einem Link ich daher die encodeURI Funktion verwenden, um die URI zu kodieren:

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

Im Quellcode meiner Seite, ich kann sehen, dass der Link verwendet %25 und nicht %.

Immer noch, wenn ich auf den Link klicke, bekomme ich den Fehler "URIEfehler: fehlerhafte URI-Sequenz" (in einem anderen Teil meines Codes habe ich eine <Match pattern="/r/:id" …).

Was habe ich falsch gemacht? Es scheint, dass die URL vor decodiert wird, die an die parseParams-Funktion von react-router übergeben wird, die versucht, es ein zweites Mal zu decodieren, was zu diesem Fehler führt.

Ich habe Probleme wie https://github.com/ReactTraining/history/issues/461 oder https://github.com/ReactTraining/history/issues/461 gefunden, aber ich habe keine Lösung für dieses Problem gefunden: Wie kann ich ein Prozentzeichen in einem React-Router verwenden: ID?

Answer 1

Hier ist eine funktionierende modifizierte Version des Beispiels URL Parameters von Recat-Training zur Verfügung gestellt.

Kopieren Sie die folgenden in Ihre index.js und testen Sie es, um zu sehen, wie es funktioniert. Ich wollte eine Codesandbox für Sie bereitstellen, aber ihr internes Routing hat Probleme, die dazu führen, dass der Bildschirm schwarz wird, sogar mit uri-codierten% -Zeichen ... Ich habe das lokal getestet und funktioniert wie ein Zauber.

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"));