Как React-Router-4 проверяет наличие дополнительных (ненужных) слешей "/", введенных вручную?

Question

Существует потенциальная ошибка, которую я обнаружил в реагирующем маршрутизаторе.В моем компоненте я делаю это:

if(this.props.location.pathname === "/home")

, чтобы проверить, находится ли пользователь по пути.В нем может быть ошибка, потому что вышеприведенное условие false, если пользователь вводит URL-адрес вручную, например example.com/home/

Как справиться с этим случаем?Множество проверок выглядит уродливо, как это:

if(this.props.location.pathname === "/home" || this.props.location.pathname === "/home/"))

Какие-нибудь предложения о том, как я могу сделать это лучше и чище?

Answer 1

Вы можете попробовать использовать indexOf:

if (this.props.location.indexOf("home") >= 1)

const URL = ["home", "/home", "/home/", "/home/about", "/about", "/logout", "/login/home"];

URL.forEach(url => {
 const isMatch = url.indexOf("home") >= 1 
 console.log(`${url} is a match? ${isMatch}`);
})

Предостережение (или преимущество) заключается в том, что он может соответствовать любой комбинации URL с /home в нем (как показано выше).

Answer 2

Попробуйте

if (this.props.location.pathname.match(/^\/home\/?$/g))

Это будет точно соответствовать /home или /home/

Answer 3

В зависимости от того, чего вы хотите достичь, вы можете смешивать атрибуты exact и strict.Я предлагаю рассмотреть это;)

строгий: bool

Матч строго;эквивалентно Route.strict.

// this will match both /home and /home/

<Route exact path="/foo" strict={false} component={foo} />

. Для будущих ссылок есть ссылка на официальные документы.

Answer 4

Рассматривали ли вы использование:

this.props.match.path