Sử dụng phần trăm (%) đăng nhập bộ phản ứng-bộ định tuyến: id

Question

Tôi đang cố sử dụng dấu phần trăm trong id bộ định tuyến phản ứng. Khi sử dụng % trong URI bị cấm, tôi phải mã hóa URI theo cách thủ công để có thể sử dụng dấu phần trăm này. Sử dụng một liên kết, tôi do đó sử dụng chức năng encodeURI để mã hóa URI:

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

Trong mã nguồn của trang web của tôi, tôi có thể thấy rằng các liên kết sử dụng %25 và không %.

Tuy nhiên, khi nhấp vào liên kết, tôi gặp lỗi "URIError: chuỗi URI không đúng định dạng" (trong một phần khác của mã của tôi, tôi có <Match pattern="/r/:id" …).

Tôi đã làm gì sai? Dường như url được giải mã trước khi được chuyển tới hàm parseParams của bộ phản ứng-bộ định tuyến, cố gắng giải mã nó lần thứ hai, dẫn đến lỗi này.

Tôi tìm thấy các vấn đề như https://github.com/ReactTraining/history/issues/461 hoặc https://github.com/ReactTraining/history/issues/461, nhưng tôi không tìm thấy giải pháp nào cho vấn đề này: làm cách nào tôi có thể sử dụng dấu phần trăm trong bộ định tuyến phản hồi: id?

Answer 1

Đây là phiên bản sửa đổi hoạt động của ví dụ URL Parameters do Recat-Training cung cấp.

Sao chép dán phần dưới đây vào tệp index.js của bạn và kiểm tra để xem nó hoạt động. Tôi sẽ cung cấp một codesandbox cho bạn, nhưng định tuyến nội bộ của họ có vấn đề khiến cho màn hình chuyển sang màu đen ngay cả với mã hóa uri% dấu ... Tôi đã thử nghiệm cục bộ này và hoạt động như một nét duyên dáng.

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