Реагировать на маршрутизацию с URL-ссылкой в ​​качестве параметров

Question

Как я могу установить маршрут следующим образом.

<Route path='/:id/:url' component={Url}/>

, а затем в компоненте Url получить доступ к значению этого URL-адреса как.

const url = this.props.params.match.url

, поэтому, если я передам http://localhost:3000/245/http://www.msn.com

Я бы смог получить это значение URL через props.params.

Answer 1

Вы можете закодировать ваш URL, чтобы удалить косую черту и другие специфичные для URL символы, используя encodeURIComponent

Так что для вашего случая это будет const urlEncoded = encodeURIComponent(http://www.msn.com), тогда передача этого значения вашему URL должна привести к http://localhost:3000/245/http%3A%2F%2Fwww.msn.com, к которым вы можете получить доступ, используя this.props.params.match.url

Answer 2

Все, что вам нужно, это кодировать URI для передачи URL в строке запроса.

вы можете использовать encodeURIComponent () для кодирования URL и decodeURIComponent () для получения обратно в формате URL

И затем вы можете получить к нему доступ, используя this.props.params.match.url

const url = encodeURIComponent(this.props.params.match.url)