我正在使用Reactjs,React Router和Relay . 问题是:在我的程序组件中,所有链接我点击重定向到主页,而元素的网址显示我期望的 . 例如:如果我点击指向/ 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>
)
1 回答
有关"Link"组件的支柱"to"的官方文件(见https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#link)说明:
因此,将链接的路径更改为绝对URL
/community/${this.props.params.cid}/program/${group.groupId}
可解决此问题 .