nested custom routing #307
Description
Using custom routing nested Route:
App.js
<Router>
<div className="App-menu">
<Link to='/en/works'>Works</Link>
<Link to='/en/about'>About</Link>
<Link to='/en/events'>Events</Link>
</div>
<div className="App-right">
<Switch>
<Route path="/" exact render={() => null} />
<Route path={`/:lang/about`} render={() => <About lang={lang} />} />
<Route path={`/:lang/events`} render={() => <Events lang={lang} />} />
<Route path={`/:lang/works`} render={() => <WorkList lang={lang} />} />
</Switch>
</div>
</Router>
WorkList.js
<div>
<div className="works-menu">
<Link to={`/en/works/work1`}>work1</Link>
<Link to={`/en/works/work2`}>work2</Link>
<Link to={`/en/works/work3`}>work3</Link>
</div>
<Route path={`/:lang/works/:name`} render={() => <Work lang={lang} />} />
</div>
It works if I go directly (full page refresh) to /en/works/work1. However I get an error if I do a menu click on one of <Link to={'/en/works/work1'}>work1</Link>.
I have all the route in my static config:
return [
{
path: '/',
},
{
path: `/en/works/work1`,
getProps: () => ({
data: work1,
}),
},
etc..
];
Also tried having children property in static config. The same output:
Warning: getRouteProps could not find any props for route: /en/works/stone-water-sting. Either you are missing a getProps function for this route in your static.config.js or you are using the getRouteProps HOC when you don't need to.