유효 라우터가 유효한 경로와 일치하지 않음

Question

내가 상관없이 경로의 두 번째 부분에서이 반응 라우터를 찾을 수 없습니다.

Express 서버 여기

app.get('/*', (req, res) => { 
    res.sendFile(path.join(__dirname, 'index.html')); 
}); 

내가했습니다 경로의 몇 가지 예입니다 (그래서 난이 좋은 가정 내가 어떤 URL에 GET 오류를받지 못했습니다) 모든 URL의 일치 된 index.html을 반환 라우터에게 docs

예 1) 반응에있어서 유효한 규칙되어야하는 시도

<Route path="test"> 
    <IndexRoute component={Home} /> 
    <Route path="/login" component={Login} /> 
</Route> 

OR

<Route path="test"> 
    <IndexRoute component={Home} /> 
    <Route path="/login" component={Login} /> 
</Route> 

http://localhost:3100/test는 = 성공> http://localhost:3100/test/login = 실패가> 나에게

예 2) 빈 화면을 제공

<Route path="/login" component={Login} /> 

http://localhost:3100/login = 성공> 반환 구성 요소 로그인 홈 구성 요소를 반환

,451,515,

예 3)

<Route path="/test/login" component={Login} /> 

또는

이

<Route path="test/login" component={Login} /> 

http://localhost:3100/test/login = 실패가> 나에게 빈 화면 내가 버전 2.5을 사용하고

을 제공, 어떤 도움이 많이 주시면 감사하겠습니다 !

은 **의 원사 덤프 **

react-router@^2.5.0: 
    version "2.8.1" 
    resolved "https://registry.yarnpkg.com/react-router/-/react-router-2.8.1.tgz#73e9491f6ceb316d0f779829081863e378ee4ed7" 
    dependencies: 
    history "^2.1.2" 
    hoist-non-react-statics "^1.2.0" 
    invariant "^2.2.1" 
    loose-envify "^1.2.0" 
    warning "^3.0.0" 

Answer 1

이 path="login" 대신 path="/login" 시도 라우터 반응한다. 중첩 된 경로에는 경로 앞의 슬래시가 필요하지 않습니다.

<Route path="test/"> 
    <IndexRoute component={Home} /> 
    <Route path="login" component={Login} /> 
</Route> 

Answer 2

는 express documentation에서 app.get('/*'는 정규 표현식을 사용합니다. 그래서 '/*'은 0에서 n '/'까지 작동합니다. 시도 :

app.get('/.* 

/.*가 '/'+ 0 N에 caractères를 해결해야한다.

안부

Answer 3

난 당신이 경로 메시지를 찾을 수 있지만 빈 화면, 나는 다음을 제안 받고 있지 않기 때문에 문제가, 당신이 반응 라우터 자체보다 앱에 렌더링하는 방식에 더있다 생각합니다.

다음

import { useRouterHistory } from 'react-router'; 
import createBrowserHistory from 'history/lib/createBrowserHistory'; 

// ======================================================== 
// Browser History Setup 
// ======================================================== 
const createHistory = (basename) => { 
    return useRouterHistory(createBrowserHistory)({ 
    basename: basename 
    }) 
} 

const history = createHistory('/test'); 

귀하의 경로 구성이 다음이

<Route path="/" component={App} > 
    <IndexRoute component={Home} /> 
    <Route path="login" component={Login} /> 
</Route> 

모양을 않는 당신의 역사 개체를 만들 때 귀하의 응용 프로그램 구성 요소는 다음이

export const App extends Component = { 
render() { 
    return(
    <div class='app-container'> 
    {this.props.children} 
    </div> 
    ) 
} 
} 

App.propTypes = { 
children: PropTypes.element.isRequired 
} 

export default App; 

과 같을 것

그러면 컴포넌트에 액세스하고 렌더링 할 수 있습니다. 로그인 @/test/login