I'm trying to add some animations and smoothness to an app with Framer-motion and I'm struggling to make it all work.
Using react-router 6, I want to trigger some exit animations on route sub-components when the url changes. Following this tutorial, here is what I got for the main layout :
export default function MainWrapper() {
const location = useLocation();
return (
<Main>
<AnimatePresence exitBeforeEnter initial={false}>
<Routes key={location.pathname}>
<Route path="/" element={<Dashboard />} />
<Route path="project/:id/*" element={<Project />} />
</Routes>
</AnimatePresence>
</Main>
);
}
The pages Dashboard and Project are build using some composition of Antd's Row and Col system. I want to animate Row's children to appear one after the other on mount, and to disappear one after the other on unmount :
import React, { ReactNode } from "react";
import { Card, Col, Row } from "antd";
import { motion } from "framer-motion";
// Section
type SectionProps = {
title?: ReactNode;
extra?: ReactNode;
children?: ReactNode;
span?: number;
};
export default function Section({
title,
extra,
children,
span = 24
}: SectionProps) {
return (
<MotionCol span={span} variants={colVariant}>
<Card title={title} extra={extra}>
{children}
</Card>
</MotionCol>
);
}
// Section.Group
type GroupProps = {
children?: ReactNode;
};
Section.Group = function({ children }: GroupProps) {
return (
<MotionRow
gutter={[24, 24]}
variants={rowVariant}
initial="hidden"
animate="show"
exit="close"
>
{children}
</MotionRow>
);
};
// Framer stuff
const MotionRow = motion(Row);
const MotionCol = motion(Col);
const transition = { duration: 0.4, ease: [0.43, 0.13, 0.23, 0.96] };
const rowVariant = {
hidden: {},
show: {
transition: {
staggerChildren: 0.1
}
},
close: {}
};
const colVariant = {
hidden: { opacity: 0, x: 20, transition },
show: { opacity: 1, x: 0, transition },
close: {
opacity: 0,
x: -20,
transition
}
};
Dashboard is then built using these blocks :
<Section.Group>
<Section>
First section...
</Section>
<Section>
Second section...
</Section>
</Section.Group>
The issue : Only hidden and show work. Not close. There is no exit-animation when leaving a page. How could I solve this ? Thank you.
Things I found wrong:
For custom components the motion function requires you to forward the ref
Docs: https://www.framer.com/api/motion/component/#custom-components
const ForwardedAntdRow = React.forwardRef((props, ref) => (
<Row ref={ref} {...props} />
));
const MotionRow = motion(ForwardedAntdRow);
not
const MotionRow = motion(Row);
Route doesn't have an element prop
<Route path="/page1">
<Page1 />
</Route>
is pretty standard notation as far as I know (I don't work with react-router often)
I created a working example here: https://codesandbox.io/s/framer-motion-animate-react-router-transition-kczeg?file=/src/index.js:1308-1372
I can answer any other questions you have when I am online tomorrow. Let me know
I can see two potential problems with your code:
1.
Note: Child motion components must each have a unique key prop so
AnimatePresence can track their presence in the tree.
Note: The custom component being removed from the DOM must still be a
direct descendant of AnimatePresence for the exit animation(s) it
contains to trigger.
source: https://www.framer.com/api/motion/animate-presence/
So your code would become:
export default function MainWrapper() {
const location = useLocation();
return (
<Main>
<Routes key={location.pathname}>
<AnimatePresence exitBeforeEnter initial={false}>
<Route key="dashboard" path="/" element={<Dashboard />} />
<Route key="project" path="project/:id/*" element={<Project />} />
</AnimatePresence>
</Routes>
</Main>
);
}
Related
My Router is a simple component containing public and private routes. I have created an AuthRoute referring to the great tutorial from here
So, my Router looks like:
<Router>
<div>
<Navigation />
<Route exact path={ROUTES.LANDING} component={Landing} />
<Route path={ROUTES.SIGN_UP} component={SignUp} />
<Route path={ROUTES.SIGN_UP_SUCCESS} component={SignUpSuccess} />
<AuthenticationRoute path={ROUTES.HOME} component={Home} />
</div>
</Router>
and my AuthenticationRoute looks like this:
export const AuthenticationRoute = ({ component: Component, ...rest }) => {
const [authChecking, setAuthChecking] = useState(true);
const [{ isAuth }, dispatch] = useStateValue();
useEffect(() => {
checkLoggedIn().then(res => {
setAuthChecking(false);
dispatch({
op: 'auth',
type: 'toggleSessionAuth',
toggleSessionAuth: res
});
});
}, [])
if(authChecking)
return null;
if(!isAuth) {
return <Redirect to='/' />;
}
return <Route {...rest} render={(props) => (
<Component {...props} />
)
} />
}
Everything looks fine, however, my console returns such warning:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from the render. Or maybe you meant to call this function rather than return it.
I have tried different solutions using component/render etc, however, I could not find a solution to this problem and I have no idea what I am doing wrong.
For testing purposes, instead of rendering Component, I tried to render simple <div>test</div> and it worked fine. However, when I am passing a JSX component in props, it returns the warning shown above.
Implementation oh Home Component (Home.js):
export const Home = () => {
const [{ user }, dispatch] = useStateValue();
const { history } = useReactRouter();
const moveTo = path => {
dispatch({
op: 'other',
type: 'setView',
setView: path
});
history.push(path);
}
return (
<div className="pageMenuWrapper">
<h1 className="homeTitle">Hi {() => user ? `, ${user.username}` : ``}.</h1>
<div className="wrapper">
<Tile image={leagueico} alt="text" onClick={() => moveTo(ROUTES.TEST)}/>
<Tile comingSoon />
</div>
</div>
);
}
export default Home;
Could anyone help me solve this little problem?
So I have a custom component for my sidebar navigation that isn't completely functional. I'm trying to figure out how to dynamically add isSelected to the CustomItem component by location.
Edit: I'm assuming that useLocation from react-router-dom is my best bet for the first part.
Here's the code for the Dashboard:
/** #jsx jsx */
import React, { forwardRef } from 'react';
import {
Main,
Content,
LeftSidebar,
} from '#atlaskit/page-layout';
import {
Link,
Route,
Switch,
useParams,
useRouteMatch } from 'react-router-dom';
import { css, jsx } from '#emotion/core';
import { Section } from '#atlaskit/menu';
import {
Header,
NavigationHeader,
NestableNavigationContent,
SideNavigation,
CustomItem,
CustomItemComponentProps
} from '#atlaskit/side-navigation';
type CustomProps = CustomItemComponentProps & {
href: string;
};
const CustomLink = forwardRef<HTMLAnchorElement, CustomProps>(
(props: CustomProps, ref) => {
const { href, children, ...rest } = props;
return (
<Link to={href} ref={ref} {...rest}>
{children}
</Link>
);
},
);
function SideNavigationWrapper(props: { children: React.ReactNode }) {
return (
<div
css={css`
height: 100%;
& nav {
min-width: 20px;
overflow-x: hidden;
}
`}
>
{props.children}
</div>
);
}
function Components() {
let { component } = useParams();
if (component === 'assets') {
return (
<Assets />
);
}
if (component === 'orders') {
return (
<Orders />
);
}
return (
<div></div>
);
}
export default function Dashboard() {
let { path } = useRouteMatch();
return (
<Content>
<LeftSidebar
isFixed={true}
id="dash-navigation"
>
<SideNavigationWrapper>
<SideNavigationContent />
</SideNavigationWrapper>
</LeftSidebar>
<Main>
<div
style={{
marginLeft: 40,
marginRight: 40,
marginTop: 20,
}}
>
<Switch>
<Route exact path={path}>
<Overview />
</Route>
<Route path={`${path}/:component`}>
<Components />
</Route>
</Switch>
</div>
</Main>
</Content>
);
}
const SideNavigationContent = () => {
return (
<SideNavigation label="DashboardNav">
<NavigationHeader>
<Header>Dashboard</Header>
</NavigationHeader>
<NestableNavigationContent initialStack={[]}>
<Section>
<CustomItem
isSelected
component={CustomLink}
href="/dashboard"
iconBefore={<PortfolioIcon label="" />}
>
Portfolio
</CustomItem>
<CustomItem
component={CustomLink}
href="/dashboard/assets"
iconBefore={<SuitcaseIcon label="" />}
>
Assets
</CustomItem>
<CustomItem
component={CustomLink}
href="/dashboard/orders"
iconBefore={<RoadmapIcon label="" />}
>
Orders
</CustomItem>
</Section>
</NestableNavigationContent>
</SideNavigation>
);
};
It's also worth nothing that my approach has slightly messed up the styling as shown below:
Which should appear like this naturally without me having to hover over it.
Edit: I'm also assuming that I would have to override the styling with cssFn as per the documentation.
Any guidance on either two issues would be helpful. I've gave myself a headache trying to redo the entire apps routing. Figured I'd try my best to wrap this up tonight so I can move onto greater issues
You should assign boolean instead of putting props
const SideNavigationContent = props => {
//Add logic to control variable
//isPortfolioSelected, isAssetsSelect, isOrdersSelected, then assign to each item,
//Ex: isPortfolioSelected = props.selected['Portfolio']
return (
<SideNavigation label="DashboardNav">
<NavigationHeader>
<Header>Dashboard</Header>
</NavigationHeader>
<NestableNavigationContent initialStack={[]}>
<Section>
<CustomItem
isSelected={isPortfolioSelected}
component={CustomLink}
href="/dashboard"
iconBefore={<PortfolioIcon label="" />}
>
Portfolio
</CustomItem>
<CustomItem
isSelected={isAssetsSelect}
component={CustomLink}
href="/dashboard/assets"
iconBefore={<SuitcaseIcon label="" />}
>
Assets
</CustomItem>
<CustomItem
isSelecled={isOrdersSelected}
component={CustomLink}
href="/dashboard/orders"
iconBefore={<RoadmapIcon label="" />}
>
Orders
</CustomItem>
</Section>
</NestableNavigationContent>
</SideNavigation>
);
};
I am experiencing the following problem:
I have two screens in my application, one if the user has access and one if not.
If the user has access to the system, he will be redirected to the screen A, a private route that has internal states, when the private routes change, the internal state of that screen A should continue until he changes to a non-private or unknown route.
The point is, I have a private routes vector, but when I loop these routes and add a key to each Router component, on each change of route, it will unmount and mount component A (Code sample here), so I lose the internal state of A, and if I add the key to the child component of A, the internal state remains as I would like (Code sample here), however I break the child key rule of react.
Warning: Each child in a list rule should have a unique" key "prop.
Any help would be amazing! :)
#Edit: the code snippet of first sandbox. The difference between the first one and the second is the key prop, instead it be inside Route, it is within the component.
#Edit 2:
I've fixed it cdeclaring all routes statically and letting the access policy come dinamically. Ty for help!
If anyone find a better solution, It'll be wellcome! :)
{ canAccess: true, path: "/home", component: () => <div>Home</div> },
{ canAccess: true, path: "/foo", component: () => <div>Foo</div> },
{ canAccess: false, path: "/blah", component: () => <div>Blah</div> }
];
const Homepage = () => {
return (
<div>
<Link to="/home">Home</Link>
<br />
<Link to="/foo">Foo</Link>
<br />
<Link to="/blah">Blah</Link>
</div>
);
};
const Main = ({ children }) => {
const [innerState, setInnerState] = useState(112);
return (
<div>
{children}
{JSON.stringify(innerState)}
<br />
<button onClick={() => setInnerState(innerState + 1)}>AddNumber</button>
<Homepage />
</div>
);
};
const PrivateRoute = ({ component: Component, path, canAccess, index }) => (
<Route
key={index}
path={path}
render={() =>
canAccess ? (
<Main>
<Component />
</Main>
) : (
<div>Not found :(</div>
)
}
/>
);
function App() {
return (
<div className="App">
<BrowserRouter>
<Switch>
{defaultRoutes.map((route, index) => {
return PrivateRoute({ index, ...route });
})}
<Route path="/" exact component={() => <Homepage />} />
<Route component={() => <div>Not found :(</div>} />
</Switch>
</BrowserRouter>
</div>
);
}
I've fixed it cdeclaring all routes statically and letting the access policy come dinamically. Ty for help!
If anyone find a better solution, It'll be wellcome! :)
I'm struggling to add <Link/> component to my material-ui AppBar
This is my navigation class:
class Navigation extends Component {
constructor(props) {
super(props)
}
render() {
var styles = {
appBar: {
flexWrap: 'wrap'
},
tabs: {
width: '100%'
}
}
return (
<AppBar showMenuIconButton={false} style={styles.appBar}>
<Tabs style={styles.tabs}>
<Tab label='Most popular ideas'/>
<Tab label='Latest ideas' />
<Tab label='My ideas' />
</Tabs>
</AppBar>
)
}
}
Which looks okay:
Tabs are clickable, have fluid animations, that's cool. But how do I wire them up together with react-router and its' <Link/> component?
I've tried adding onChange listener like that:
<Tab
label='My ideas'
onChange={<Link to='/myPath'></Link>}
/>
However I'm getting following error:
Uncaught Invariant Violation: Expected onChange listener to be a function, instead got type object
If I try to wrap <Tab/> component into <Link/> component, I'm getting error that <Tabs/> component accepts only <Tab/> component.
This doesn't work either (no error is being produced, but clicking on Tab does not bring me to the path):
<Tab label='Most popular ideas'>
<Link to='/popular'/>
</Tab>
How do I make <Link/> component work together with <Tabs> and <AppBar>? If that's not possible, I can use any other component from material-ui library to form a proper menu.
For Material UI 1.0 with Typescript: see this post by #ogglas below.
For Material-UI 1.0 with plain JS:
<Tabs value={value} onChange={this.handleChange}>
{
this.props.tabs.map(
({label, path})=><Tab key={label}
label={label}
className={classes.tabLink}
component={Link}
to={path} />
)
}
</Tabs>
And classes.tabLink is defined as:
tabLink : {
display:"flex",
alignItems:"center",
justifyContent:"center"
}
How this works?
All the mui 1.0 components inheriting from ButtonBase, support a component prop, see ButtonBase. The idea is to allow you to control what the component renders as its wrapper/root element. Tab also has this feature although at the time of writing this answer this prop is not documented explicitly, but as Tab inherits from ButtonBase, all its props carry over (and the documentation does cover this).
Another feature of ButtonBase is that all the extra props, not in use by ButtonBase or inherited component, are spread over the specified component. We have used this behavior to send the to prop used by Link by giving it to Tab control. You can send any additional props in the same way. Note that this is documented explicitly for both ButtonBase and Tab.
Thanks #josh-l for asking this to be added.
here's how you can do it now:
<Tabs onChange={this.changeTab} value={value}>
<Tab value={0} label="first" containerElement={<Link to="/first"/>} />
<Tab value={1} label="second" containerElement={<Link to="/second"/>}/>
<Tab value={2} label="third" containerElement={<Link to="/third"/>} />
</Tabs>
You can try this simple method
<Tab label='Most popular ideas' to='/myPath' component={Link} />
This is solved using the <Link /> from material-ui instead of directly using the <Link /> or <NavLink /> from react-router. The example for the same can be found in the documentation here.
https://material-ui.com/components/links/
Also <Button /> tag has a component prop to achieve this
<Button color="inherit" component={Link} to={"/logout"}>Logout</Button>
An extensive discussion on this can be found here
https://github.com/mui-org/material-ui/issues/850
Since we are using TypeScript I could not use #hazardous solutions. This is how we implemented routing for material-ui v1.0.0-beta.16 and react-router 4.2.0. The reason why we are splitting this.props.history.location.pathname is because we need to access /renewals/123 for example. If we did not do this we would get the following warning and no tab would be displayed as active: Warning: Material-UI: the value provided '/renewals/123' is invalid
Complete code with imports:
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as ReactRouter from "react-router";
import * as PropTypes from "prop-types";
import { Switch, Route, Redirect, Link } from "react-router-dom";
import { Cases } from './../Cases';
import { SidePane } from './../SidePane';
import { withStyles, WithStyles } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Tabs, { Tab } from 'material-ui/Tabs';
import { withRouter } from "react-router-dom";
import Badge from 'material-ui/Badge';
import Grid from 'material-ui/Grid';
import { Theme } from 'material-ui/styles';
import SimpleLineIcons from '../../Shared/SimpleLineIcons'
interface IState {
userName: string;
}
interface IProps {
history?: any
}
const styles = (theme: Theme) => ({
root: theme.typography.display1,
badge: {
right: '-28px',
color: theme.palette.common.white,
},
imageStyle:{
float: 'left',
height: '40px',
paddingTop: '10px'
},
myAccount: {
float: 'right'
},
topMenuAccount: {
marginLeft: '0.5em',
cursor: 'pointer'
}
});
type WithStyleProps = 'root' | 'badge' | 'imageStyle' | 'myAccount' | 'topMenuAccount';
class Menu extends React.Component<IProps & WithStyles<WithStyleProps>, IState> {
constructor(props: IProps & WithStyles<WithStyleProps>) {
super(props);
this.state = {
userName: localStorage.userName ? 'userName ' + localStorage.userName : ""
}
}
componentDidMount() {
this.setState({ userName: localStorage.userName ? localStorage.userName : "" })
}
logout(event: any) {
localStorage.removeItem('token');
window.location.href = "/"
}
handleChange = (event: any, value: any) => {
this.props.history.push(value);
};
render() {
const classes = this.props.classes;
let route = '/' + this.props.history.location.pathname.split('/')[1];
return (
<div>
<Grid container spacing={24}>
<Grid item xs={12} className={classes.root}>
<img src="/Features/Client/Menu/logo.png" alt="Logo" className={classes.imageStyle} />
<div className={this.props.classes.myAccount}>
<span><span className={this.props.classes.topMenuAccount}>MY ACCOUNT</span><span className={classes.topMenuAccount}><SimpleLineIcons iconName={'user'} />▾</span></span>
<span onClick={this.logout} className={classes.topMenuAccount}><SimpleLineIcons iconName={'logout'} /></span>
</div>
</Grid>
<Grid item xs={12} >
<div className="route-list">
<Tabs
value={route}
onChange={this.handleChange}
indicatorColor="primary"
textColor="primary"
>
<Tab label="Overview" value="/" />
<Tab label={<Badge classes={{ badge: classes.badge }} badgeContent={this.props.caseRenewalCount} color="primary">
Renewals
</Badge>} value="/renewals" />
</Tabs>
</div>
</Grid>
</Grid>
</div>
);
}
}
export default withStyles(styles)(withRouter(Menu))
TypeScript implementation of the router-driven tabs.
For those who look for the TypeScript implementation. Easy configurable. Driven by tabs configuration.
interface ITabsPageProps {
match: match<{page: string}>;
history: History;
}
const tabs = [{
label: 'Fist Tab',
link: 'fist-tab',
component: <FirstTabContent/>
}, {
label: 'Second Tab',
link: 'second-tab',
component: <SecondTabContent/>
}, {
label: 'Third Tab',
link: 'third-tab',
component: <ThirdTabContent/>
}];
export class TabsPage extends React.Component<ITabsPageProps> {
handleChange(tabLink: string) {
this.props.history.push(`/tabs-page/${tabLink}`);
}
render() {
const currentTab = this.props.match.params.page;
const selectedTab = tabs.find(tab => currentTab === tab.link);
return (
<Fragment>
<Tabs
value={currentTab}
onChange={(event, value) => this.handleChange(value)}
>
{tabs.map(tab => (
<Tab
key={tab.link}
value={tab.link}
label={tab.label}
/>
))}
</Tabs>
{selectedTab && selectedTab.component}
</Fragment>
);
}
}
Here's another implementation of React with hooks, Material-UI with tabs, React Router with Link, and TypeScript.
import * as React from "react";
import { BrowserRouter as Router, Route, Redirect, Switch, Link, LinkProps } from 'react-router-dom';
import AppBar from '#material-ui/core/AppBar';
import Tabs from '#material-ui/core/Tabs';
import { default as Tab, TabProps } from '#material-ui/core/Tab';
import Home from './Home';
import ProductManagement from './ProductManagement';
import Development from './Development';
import HomeIcon from '#material-ui/icons/Home';
import CodeIcon from '#material-ui/icons/Code';
import TimelineIcon from '#material-ui/icons/Timeline';
const LinkTab: React.ComponentType<TabProps & LinkProps> = Tab as React.ComponentType<TabProps & LinkProps>;
function NavBar() {
const [value, setValue] = React.useState(0);
const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
setValue(newValue);
};
return (
<div >
<AppBar position="static" >
<Tabs value={value} onChange={handleChange} centered>
<LinkTab label='Home' icon={ <HomeIcon />} component={Link} to="/" />
<LinkTab label='Development' icon={<CodeIcon />} component={Link} to="/dev" />
<LinkTab label='Product Management' icon={<TimelineIcon />} component={Link} to="/pm" />
</Tabs>
</AppBar>
</div>
)
};
export default function App() {
return (
<Router>
<div>
<NavBar />
<Switch>
<Route exact path="/" component={ Home } />
<Route exact path="/dev" component={ Development } />
<Route exact path="/pm" component={ ProductManagement } />
<Redirect from="/" to="/" />
</Switch>
</div>
</Router>
)
}
So my work-around for this solution has been quite reliable, though it may be more manual of a solution than what you're looking to do.
The strategy that I've been using is to actually not even use the Link Component. Instead, you'll utilize the Tabs onChange property as a callback that can respond to Tab clicks, and track location manually with Props on the Parent.
You can import a utility called History from react-router that will allow you to manually push locations. While using React-Router, your component tree will have access to Location prop that has a pathname key with the string of your current location.
We will manually parse this string into the components that make up your current URL, then use a Switch statement to decide both which tab is currently selected and also where to link to when a tab is clicked. (This gives you a fair amount of control over navigation)
( e.g. ['', 'latest'] )
Here is a mock up of what your component MAY look like after integrating this solution.
import React from 'react';
import {History} from 'react-router';
function parseLocation(location) {
if (String(location)) {
var locationArray = location.split('/');
return locationArray;
} else {
return false;
}
};
function filterPath(path) {
let locationArray = parseLocation(path);
return locationArray[locationArray.length - 1];
};
var Navigation = React.createClass({
mixins: [History],
getPage() {
if (this.props.location.pathname) {
let pathname = this.props.location.pathname;
let pageName = filterPath(pathname);
return pageName;
} else {
return false;
}
},
decideContent() {
let page = this.getPage();
let content;
switch(page) {
case 'popular':
content = 0;
case 'latest':
content = 1;
case 'myideas':
content = 2;
default:
content = 0;
}
return content;
},
handleTabChange(value) {
let location = false;
switch (value) {
case 0:
location = 'popular';
break;
case 1:
location = 'latest';
break;
case 2:
location = 'myideas';
break;
}
if (location && location !== this.getPage()) {
this.history.pushState(null, '/'+location);
}
},
render() {
var styles = {
appBar: {
flexWrap: 'wrap'
},
tabs: {
width: '100%'
}
};
let content = this.decideContent();
let tabs = <Tabs
onChange={this.handleTabChange}
value={content}
>
<Tab label="Most Popular Ideas" value={0} />
<Tab label="Latest Ideas" value={1} />
<Tab label="My Ideas" value={2} />
</Tabs>;
return (
<AppBar showMenuIconButton={false} style={styles.appBar}>
{tabs}
</AppBar>
);
}
});
Check this link, I implemented the solution and worked for me
Composition in material UI
If you use NextJs, you can do it like that, and create your own component.
*i didn`t wrap the Tab with 'a' tag, because it added automatically
const WrapTab = (props) => {
const { href } = props
return (
<Link href={href} style={{ width: "100%" }}>
<Tab {...props} />
</Link>
)}
and then this is your return
<Tabs
value={value}
indicatorColor="primary"
textColor="primary"
onChange={handleChange}
variant="fullWidth"
>
<WrapTab href="/testPage/?tab=0" icon={<MenuIcon />} />
<WrapTab href="/testPage/?tab=1" icon={<StampIcon2 />} />
<WrapTab href="/testPage/?tab=2" icon={<ShopIcon />} />
<WrapTab href="/testPage/?tab=3" icon={<PenIcon />} />
<WrapTab href="/testPage/?tab=4" icon={<ProfileIcon />} />
</Tabs>
link to material-ui docs:
https://material-ui.com/guides/composition/
This seems to work for me
import { Link as RouterLink } from 'react-router-dom';
import Link from '#mui/material/Link';
<Link to={menuItem.url} component={RouterLink} aria-current="page">
{menuItem.label}
</Link>
For anyone looking to wrap Material-ui Link with Next.js Link
import Link from "next/link"
import MuiLink from "#material-ui/core/Link"
const CustomNextLink = ({href, alt}) => ({children, ...rest}) => (
<Link href={href} alt={alt}>
<MuiLink {...rest}>
{children}
</MuiLink>
</Link>)
Then pass it to you Tab component
<Tab
key={...}
label={title}
icon={icon}
component={CustomNextLink({href: to, alt: title})}
style={...}
className={...}
classes={{selected: ...}}
{...a11yProps(index)}
/>
Use the href="" option as shown below:
<Tab
href="/en/getting-started"
label="Contact US"
style={{ color: "white", textDecoration: "none" }}
/>
To remove the ripple effect on clicking, use the option disableRipple
I am working on a fitness app, which means I have some nested data that i am using to dynamically generate some pages within pages within pages.
Here is the data i am using along with it's accompanying functions.
const data = [
{
title: "Routine1",
days: [
{
title: "Day1",
exercises: [
{
title: "Bench Press"
}
]
}
]
}
];
const dataMap = data.reduce(function (map, routine) {
routine.daysMap = routine.days.reduce(function (daysMap, day) {
daysMap[day.title] = day
return daysMap
}, {})
map[routine.title] = routine
return map
}, {})
exports.getAll = function () {
return data
}
exports.lookupRoutine = function (title) {
return dataMap[title]
}
exports.lookupDay = function (routine, day) {
return dataMap[routine].daysMap[day]
}
I want to use React Router to go from an index page that displays all the routines, to a page that displays all the days in a routine, to a page that displays all the exercises in that day.
Here is how I have set up my routes to do this:
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="routine/:routine" components={{ content: Routine, header: RoutineHeader }}>
<Route path=":day" components={{ content: Day, header: DayHeader }}>
</Route>
</Route>
</Route>
Let's not worry about the header components because they dont really do anything right now. But I will show how I have set up the App, Index, Routine, and Day components. HINT: they are the same...
app component
export default class App extends Component {
render() {
const { content, header } = this.props
return (
<div>
<header>
{header || <IndexHeader />}
</header>
<div>
{content || <Index />}
</div>
</div>
)
}
}
index component
export default class Index extends Component {
render() {
return (
<div class="main-container">
<h2>Routines</h2>
{data.getAll().map((routine, index) => (
<Link class="main-link" key={index} to={`/routine/${routine.title}`}>{routine.title}</Link>
))}
</div>
)
}
}
Routine component
export default class Routine extends Component {
render() {
const routine = data.lookupRoutine(this.props.params.routine);
return(
<div class="main-container">
<h2>{routine.title} Days</h2>
{routine.days.map((day, index) => (
<Link key={index} class="main-link" to={`/routine/${routine.title}/${day.title}`}>{day.title}</Link>
))}
</div>
);
}
}
Day component
export default class Day extends Component {
render() {
const { routine, day } = this.props.params;
const dayItem = data.lookupDay(routine, day);
return(
<div class="main-container">
<h2>{dayItem.title} Exercises</h2>
</div>
);
}
}
maybe you want some visuals to help out? ok well here are some visuals, notice that the 2nd picture is the same as the 1st except in the URL, because I have actually clicked on the day.
Routine1 Page
What is supposed to be the Day1 Page
Edit: to clarify, what I want the app to do, is display all the days in a routine when i click that routine, and display all the exercises in a day when i click that day. right now it only goes down one level to show all the days in the routine.
I figured out my problem.
What I was doing wrong was nesting the day components in the routine components. The App component is the one that is accepting the conent: and header: components, and since I nested days within routines, the App, which is essentially the view, was not updating because it wasn't finding the day components.
The correct routing looks like this:
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="routine/:routine" components={{ content: Routine, header: RoutineHeader }}></Route>
<Route path="routine/:routine/:day" components={{ content: Day, header: DayHeader }}></Route>
</Route>
</Router>