Improved NotFount component so that link text is passed as children

This commit is contained in:
Alejandro Celaya 2020-03-08 10:28:04 +01:00
parent 4a69907ca3
commit 6395e4e00b
2 changed files with 6 additions and 5 deletions

View file

@ -79,7 +79,7 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
<Route exact path="/server/:serverId/short-code/:shortCode/visits" component={ShortUrlVisits} /> <Route exact path="/server/:serverId/short-code/:shortCode/visits" component={ShortUrlVisits} />
<Route exact path="/server/:serverId/manage-tags" component={TagsList} /> <Route exact path="/server/:serverId/manage-tags" component={TagsList} />
<Route <Route
render={() => <NotFound to={`/server/${serverId}/list-short-urls/1`} btnText="List short URLs" />} render={() => <NotFound to={`/server/${serverId}/list-short-urls/1`}>List short URLs</NotFound>}
/> />
</Switch> </Switch>
</div> </div>

View file

@ -4,17 +4,18 @@ import * as PropTypes from 'prop-types';
const propTypes = { const propTypes = {
to: PropTypes.string, to: PropTypes.string,
btnText: PropTypes.string, children: PropTypes.node,
}; };
const NotFound = ({ to = '/', btnText = 'Home' }) => ( const NotFound = ({ to = '/', children = 'Home' }) => (
<div className="home"> <div className="home">
<h2>Oops! We could not find requested route.</h2> <h2>Oops! We could not find requested route.</h2>
<p> <p>
Use your browser{'\''}s back button to navigate to the page you have previously come from, or just press this button. Use your browser&apos;s back button to navigate to the page you have previously come from, or just press this
button.
</p> </p>
<br /> <br />
<Link to={to} className="btn btn-outline-primary btn-lg">{btnText}</Link> <Link to={to} className="btn btn-outline-primary btn-lg">{children}</Link>
</div> </div>
); );