I’m fairly new to using React in Meteor, and part of the routing is causing me a lot of grief using React Router. I can render all of my pages, but I can’t get my withTracker
container to react to changes in the route. I think it’s partially because of my structure, but it seems like there should be a good way to make this work.
My basic structure is that I have a layout
component inside of a React-Router Router
. I pass a content function to this array, with a Switch
and Routes
. I also have a withTracker
container wrapping the Router. I handle my subscriptions in there…and it doesn’t seem to be reactive. I can’t get it to re-run the subscription on a path change.
class RenderRoutes extends Component {
static propTypes = {
locations: PropTypes.object,
contents: PropTypes.func
}
render(){
return (
<Router history={browserHistory}>
<Layout
locations={this.props.locations}
contents={this.props.contents}
/>
</Router>
);
}
}
export default RenderRoutesContainer = withTracker((props)=>{
const [site_id, bldg_id, space_id] = window.location.pathname.split('/').slice(2);
const location_subscriptionHandle = Meteor.subscribe('location_basics', site_id, bldg_id, space_id);
const locations = location_subscriptionHandle.ready() ? {
sites: _Sites.find().fetch(),
bldgs: _Bldgs.find({'localID.site_id': site_id}).fetch(),
spaces: _Spaces.find({'localID.site_id': site_id, 'localID.bldg_id': bldg_id}).fetch()
} : {sites:[], bldgs:[], spaces:[]};
const contents = Contents;
return {
locations: locations,
contents: contents
}
})(RenderRoutes);
function Contents(){
return(
<Switch>
<Redirect exact from="/" to="/home" />
<Route exact path="/home/:site_id?/:bldg_id?/:space_id?" component={Home}/>
<Route exact path="/sites/:site_id?/:bldg_id?/:space_id?" component={Sites}/>
<Route exact path="/buildings/:site_id?/:bldg_id?/:space_id?" component={Buildings}/>
<Route exact path="/rooms/:site_id?/:bldg_id?/:space_id?" component={Rooms}/>
<Route component={NoMatch} />
</Switch>
)
}