const App = () => ( <Layout> <Switch> {Object.values(routes).map((route, index) => ( route.auth ? <RoutePrivate {...route} key={index} path={typeof route.path === 'function' ? route.path() : route.path}/> : <Route {...route} key={index} path={typeof route.path === 'function' ? route.path() : route.path}/> ))} <Route component={NotFound}/> </Switch> </Layout> )
render(( <Router id="UA-46921629-2"> <Route path="/" render={ props => ( <Site { ...props } import={ path => import(`./content/${path}`) } /> )} /> </Router> ), document.getElementById('root'));
const SectionRoute = ({ title, ...props }) => ( <App title={title}> <Route {...props} /> </App> )
// Component const RoutePrivate = (props) => ( props.user.isAuthenticated ? props.role ? props.user.details.role === props.role ? <Route {...props} component={props.component}/> : <Redirect to={userRoutes.login.path}/> : <Route {...props} component={props.component}/> : <Redirect to={userRoutes.login.path}/> )
render() { const { component: Component, ...rest } = this.props; const { isAuthed } = this.state; if (isAuthed) { return <Route {...rest} render={props => <Component {...props} />} />; } return null; }
render() { const activeStyle = { color: 'blue' }; return ( <div> <div> <NavLink exact to="/" activeStyle={activeStyle}>Home</NavLink> {' | '} <NavLink to="/fuel-savings" activeStyle={activeStyle}>Demo App</NavLink> {' | '} <NavLink to="/about" activeStyle={activeStyle}>About</NavLink> </div> <Switch> <Route exact path="/" component={HomePage} /> <Route path="/fuel-savings" component={FuelSavingsPage} /> <Route path="/about" component={AboutPage} /> <Route component={NotFoundPage} /> </Switch> </div> ); }
<body> <div id="root"> <Route path="/" render={ props => (
render() { return ( <Router history={history}> <Body> <Route component={Navbar} /> <Route component={ModalRoot} /> <Route component={Toasts} /> <Switch> <PrivateRoute exact path="/" component={Dashboard} /> <PrivateRoute path="/users/:username" component={Users} /> <PrivateRoute path="/users" component={Users} /> <PrivateRoute path="/communities/:slug" component={Communities} /> <PrivateRoute path="/communities" component={Communities} /> <PrivateRoute path="/threads" component={Threads} /> </Switch> </Body> </Router> ); }
<Route exact strict path="/:url*" render={props => <Redirect to={`${props.location.pathname}/`}/>} /> <Route path="/" exact component={Splash} /> <Route render={props => ( <Container className="site__content"> <Switch> <Route path="/vote" component={Vote} /> <Route path="/organization" component={Organization} /> <Route path="/starter-kits" component={StarterKits} /> <Route path="/app-shell" component={() => <React.Fragment />} /> {pages.map(page => ( <Route key={page.url} exact={true} /> ))} <Route render={props => <PageNotFound />} /> </Switch> </Container>
ReactDOM.render( <Router history={history}> <App> <Route key="index" exact path="/" render={(props) => <IndexPage cubejsApi={cubejsApi} {...props} />} /> <Route key="story" path="/stories/:storyId" render={(props) => <StoryPage cubejsApi={cubejsApi} {...props} />} /> <Route key="statistics" path="/statistics" render={(props) => <StatisticsPage cubejsApi={cubejsApi} {...props} />} /> <Route key="search" path="/search" render={(props) => <SearchPage cubejsApi={cubejsApi} {...props} />} /> </App> </Router>, // eslint-disable-next-line no-undef document.getElementById('root') );
// Component const RoutePrivate = (props) => ( props.user.isAuthenticated ? props.role ? props.user.details.role === props.role ? <Route {...props} component={props.component}/> : <Redirect to={userRoutes.login.path}/> : <Route {...props} component={props.component}/> : <Redirect to={userRoutes.login.path}/> )
const App = () => ( <Layout> <Switch> {Object.values(routes).map((route, index) => ( route.auth ? <RoutePrivate {...route} key={index} path={typeof route.path === 'function' ? route.path() : route.path}/> : <Route {...route} key={index} path={typeof route.path === 'function' ? route.path() : route.path}/> ))} <Route component={NotFound}/> </Switch> </Layout> )