Я использую Reactjs, React Router и Relay. Проблема в том, что в моем программном компоненте все ссылки перехватывают на главную страницу, а URL-адрес элементов - именно то, что я ожидаю. Например: если я нажму ссылку на /community/2/program/3, он перенаправит меня на домашнюю страницу, но когда я вхожу /community/2/program/3 в адресную строку браузера, я могу получить доступ к этой странице.
Мой index.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>
)