i'm using Reactjs, React Router and Relay. The problem is: in my program component, all the link i click redirect to homepage while the url of elements show exactly what i expect. E.g: If i click a link to /community/2/program/3 it redirect me to homepage but when i enter /community/2/program/3 to browser address bar, i can access that page.
My 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 ); My Route:
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> ); Program Component:
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 Answers
Answers 1
The official documentation concerning the prop "to" of "Link" component (see https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#link) states:
If it's a string it represents the absolute path to link to, e.g. /users/123 (relative paths are not supported).
So, changing the Link's path to absolute url /community/${this.props.params.cid}/program/${group.groupId} fixes the issue.
0 comments:
Post a Comment