свойство match.path для соблюдения базового имени (/ defaultPathname) в корневом URL-адресе - https://example.com/defaultPathname

Question

CRA 2 и React Router v4

URL нашего приложения имеет следующий формат: "https://subdomain.subdomain.domain.com/defaultPathname/"

Настройки в App.js: <BrowserRouter basename="/defaultPathname"/>

У меня проблемачто когда я использую реагирующий маршрутизатор match.path prop , он содержит только /newlink, а не /defaultPathname/newlink, следовательно, я не могу открыть новую вкладку, потому что она указывает только на /newlink вместо /defaultPathname/newlink

Как достичь этого программно без использования <Link /> компонента?

Answer 1

FWIW, вы можете использовать history.createHref (), чтобы применить базовое имя к URL-адресу, созданному с помощью generatePath, или любым другим способом:

const pathname = generatePath(routeUrl, params);

const url = history.createHref({
  pathname
});

// url includes basename

Так что я решил это следующим образом

App.js

<BrowserRouter basename="/defaultPathname">
 {children}
</BrowserRouter>

Component.js

const Component = ({ match, history, children, linkId }) => {
  const pathname = useMemo(() => generatePath(`${match.path}/${linkId}`), [linkId, match.path])
  const newLink = history.createHref({ pathname })

  return (
    <a
      href={newLink}
      onClick={(e) => {
        e.preventDefault()

        history.push({
          pathname,
        })
      }}
    >
      {children}
    </a>
  )
}