react-router에서 앱의 기본 이름 구성

react-router에서 앱의 기본 이름 구성

나는 react-router 2.x 구성, 특히 앱 기본 이름 때문에 약간 힘들어.

라이프사이클 전체에 걸쳐 다른 기본 루트를 가질 수 있는 애플리케이션을 가지고 있다.예를 들어,

• /개발 중인
• /users생산 중인
• /account이주 후 생산 중에.

기본 이름은 다음과 같은 여러 곳에서 사용된다.

• 웹 팩의 정적 자산 컴파일
• 재활성화 기본 구성
• Redirect 경로(Redirect 경로)를 Redirectx 작업으로 지정
• 이와 같은 것을 제공하는redirectUrlAPI 호출로

현재 나의 솔루션은 ENV 변수를 가지고 웹 팩과 앱 자체에서 모두 사용할 수 있도록 하는 것이다.window.defs익스프레스 서버를 통해, 그러나 나는 여전히 다음과 같은 것들을 갖게 된다.${defs.APP_BASENAME}/signin앱 전체에 걸쳐 너무 많은 장소들이 있다.

어떻게 하면 앱 베이스를 추상화할 수 있을까, 아니면 적어도 한 곳에 집어 넣을 수 있을까?라우터 구성에서 기본 경로를 지정할 수 있어야 하고, 그런 다음 상대 경로를 어떻게든 사용할 수 있어야 해, 그렇지?아니면 내가 뭘 놓치고 있는 걸까?

당신은 당신의 것을 꾸밀 수 있다.history기본이름으로이거랑 섞으면 되잖아.DefinePlugin사용할 기본 이름을 지정하기 위한 웹 팩 구성.

// webpack.config.js
new Webpack.DefinePlugin({
  BASENAME: '/users'
})

// somewhere in your application
import { useRouterHistory } from 'react-router'
import { createHistory } from 'history'

const history = useRouterHistory(createHistory)({
  basename: BASENAME
})

기본 이름 지정:/users, Ract Router will ne/users경로 이름의 시작 부분에 다음과 같이 입력하십시오.

1. URL/users경로에 의해 내부적으로 일치한다./

2. URL/users/profile경로와 일치하다/profile.

마찬가지로, 응용 프로그램 내에서 탐색할 때 경로에 기본 이름을 추가할 필요가 없다.

3. <Link to='/friends'>Friends</Link>로 항해할 것이다./friends내부적으로 그러나 위치 표시줄의 URL은/users/friends.

오늘 나는 같은 문제에 부딪쳤다.내 localhost에서는 NGINX가 루트 컨텍스트에서 처리하도록 했지만 내 prod 서버에서는 Apache가 하위 디렉토리에서 처리한다...

Paul S의 대답에 영감을 받고 여기 인포에서 영감을 받아: https://github.com/ReactTraining/react-router/issues/353

내게 맞는 해결책이 있어

Webpack config 파일에서 localhost dev에 대한 플러그 인을 정의했다.

  plugins: [
    new webpack.DefinePlugin({
      BASENAME: JSON.stringify("/")
    })
  ],

Webpack PROD 구성 파일에서 하위 폴더(예: www.example.com/users:

  plugins: [
    new webpack.DefinePlugin({
      BASENAME: JSON.stringify("/users/")
    }),

내 리액터 정의에서 언급하는 것은

import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { useBasename } from 'history'
...
<Router history={useBasename(() => browserHistory)({ basename: BASENAME })}>

나에게는 아주 우아한 해결책과 쉬운 해결책도 있다.그냥 둘러보는데 5시간 정도밖에 안 걸렸어 :-)

이것을 시도해봐 그것이 효과가 있을 것이다.

import { createBrowserHistory } from 'history';

const history = createBrowserHistory({
  basename: 'base-name'
}) 

<Router history={history}>
</Router>

참조URL: https://stackoverflow.com/questions/41440240/configuring-apps-basename-in-react-router