nana nana - 3 months ago 8
React JSX Question

Creating Route objects in React js

class PathComponents extends React.Component{
...
render(){
var articlesPath = this.state.titles.map(function(val){
return(
<Route path={val} component={DataVisualizationBox}/>
)
})
return(
<Router history={browserHistory}>
<Route path="/" component={Main}>
<IndexRoute component={DataOverviewBox}/>
<Route path="/" component={DataOverviewBox}/>
<Route path="dataVis" component={DataVisualizationBox}/>
<Route path="compare" component={DataComparison}/>
<Route path="overallStats" component={DataBox}/>
<Route path="dataCrawling" component={DataCrawlerBox}/>
{articlesPath}
</Route>
</Router>
)
}
}

ReactDOM.render(<PathComponents/>, mainPage);


I have the above code ( Some parts are removed because they are irrelevant). I want to create routes to different article titles based on the articles i have in my database. However, I was met with the error message:

Warning: [react-router] Location "some title" did not match any routes.

Anybody know why?

Answer

You are doing it wrong. Suppose you have 1000 articles you dont want to end up with 1000 routes

  <Router history={browserHistory}>
    <Route path="/" component={Main}>
      <IndexRoute component={DataOverviewBox}/>
      <Route path="/" component={DataOverviewBox}/>
      <Route path="dataVis" component={DataVisualizationBox}/>
      <Route path="compare" component={DataComparison}/>
      <Route path="overallStats" component={DataBox}/>
      <Route path="dataCrawling" component={DataCrawlerBox}/>
      <Route path="/:article_title" component={ArticleViewer}/>
      {'add this route, also note this is absolute path'}
    </Route>
  </Router>

Inside ArticleViewer component you can do something like

var title = this.props.params.article_title;
//from this title extract your article somehow
Comments