인덱스로 라우터 리디렉션 응답

인덱스로 라우터 리디렉션 응답

리액션, 리액션 라우터, 릴레이를 사용하고 있다.문제는 내 프로그램 컴포넌트에서 클릭하는 모든 링크가 홈페이지로 리디렉션되고 요소의 URL은 내가 기대하는 것을 정확히 보여준다.예: /community/2/program/3에 대한 링크를 클릭하면 홈페이지로 리디렉션되지만 /community/2/program/3을 브라우저 주소 표시줄에 입력하면 해당 페이지에 액세스할 수 있다.

내 인덱스.js:

const rootNode = document.createElement('div');
document.body.appendChild(rootNode);

ReactDOM.render(
  <Router
    history={browserHistory}
    routes={Route}
    render={applyRouterMiddleware(useRelay)}
    forceFetch
    environment={Relay.Store}
  />,
  rootNode
);

내 경로:

import React from 'react';
import { IndexRoute, Route, Redirect } from 'react-router';

// Queries
import ViewerQuery from './ViewerQuery';
import ProgramQuery from './ProgramQuery';

// Component
import AppContainer from '../components/App/AppContainer';
import FeatureContainer from '../components/Feature/FeatureContainer';

// Container
import ProgramContainer from '../components/Program/ProgramContainer';
import UserContainer from '../components/User/UserContainer';

export default (
  <Route path='/' component={AppContainer} queries={ViewerQuery}>
    <IndexRoute component={FeatureContainer} queries={ViewerQuery} />
    <Route path='/community/:cid' component={ProgramContainer} queries={ProgramQuery} />
    <Route path='/community/:cid/program/:gid' component={UserContainer} queries={ProgramQuery} />
    <Redirect from='*' to='/' />
  </Route>
);

프로그램 구성 요소:

return (
<ListGroup style = {{paddingLeft: 50, paddingRight: 50, marginBottom:0}}>
                      {this.props.viewer.groups.map((group) => {
                          return (
                                  <Col key={group.groupId} xs={12} md={4} style={{marginTop: 20}}>
                                      <Card shadow={0} style={{width: '100%'}}>
                                          <CardTitle className = {styles.cardTitleBox} style={{color: 'white', height: '176px'}}>
                                              {group.name}
                                          </CardTitle>
                                          <CardText>
                                              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                              Mauris sagittis pellentesque lacus eleifend lacinia...
                                          </CardText>
                                          <CardActions border>
                                              <Button colored>
                                                  <Link style = {{textDecoration: 'none'}} to= {`${this.props.params.cid}/program/${group.groupId}`}>
                                                      {group.name}
                                                </Link>
                                              </Button>
                                          </CardActions>
                                      </Card>
                                  </Col>

                          );
                      })}
                  </ListGroup>
)

"Link" 구성 요소의 "to"에 관한 공식 문서(https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#link) 참조):

문자열인 경우에는 /users/123(상대 경로는 지원되지 않음)과 같은 연결에 대한 절대 경로를 나타낸다.

링크 경로를 절대 URL로 변경/community/${this.props.params.cid}/program/${group.groupId}문제를 해결하다

참조URL: https://stackoverflow.com/questions/40168208/react-router-redirect-to-index