relidon relidon - 2 months ago 7
React JSX Question

Is there a way to change react Router on store change?

I'm learning react by creating a todo list. the lists are organized by projects. So I have an object with an

projects
array and a
lists
object.
{
projects: store.projects,
lists: store.lists
}

The lists would look something like this
{projectName: ['list1',...]}


My routes are whatever I have in the
projects
array

const routes = ({
var children = this.props.projects;
const routes = {
path: '/',
component: Nav,
indexRoute: { component: Layout },
childRoutes: [ ]
}
for(let i in children){
routes.childRoutes.push({path: children[i], component: Layout})
}
return routes
})
class Routing extends React.Component{
render(){
return(<Router className="row" routes={routes} history={browserHistory} />)
}
}


So far so good. Now if I dispatch an action which pushes an item into my
projects
I get this error message:


Warning: [react-router] You cannot change ; it will be ignored


Is there a way for the router to be recreated every time I add some item to
this.props.projects

Answer

You don't want to create individual routes for each product. What you want is a single route that has a variable in it's path:

<Route path="projects/:name" component={Layout} />

Entering this route will give you access to the name value, via this.props.params.name.

Comments