我正在使用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>
)