Hi there,
Working URL of website on which I am working on:
http://app.moosaconsulting.com/
I have added my custom page using the custom handler (code of that custom handler is pasted below)
const strategyHandler = {
name: "strategy",
priority: 10,
pattern: "/strategy/",
func: ({ state }) => {
state.source.data['/strategy/'].isStrategy = true;
}
}
And following code is added in actions > theme:
init: ({ libraries }) => {
libraries.source.handlers.push(strategyHandler);
},
And it is connected on Homepage with an <a> tag under What We Do Section:
On components > index.js using the following command to load my strategy page by the following Switch:
<Switch>
<Strategy when={data.isStrategy} />
</Switch>
ISSUE IS:
When i click on Strategy I am experiencing a page refresh. How can i avoid it and make it similar like Menu Link i.e., when we click on Nav Menu its not reloading the page only content is changing and application is behaving like SPA. Is there any way to make it happen?
1 Like
Hi there,
Thanks for your response.
URL to website: Website URL
This is code for Strategy under the above service section > Strategy Page:
import React from 'react';
import {Global, css, connect} from "frontity";
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import servicesSectionsCss from "./servicesSectionsCss.css";
const fetchedServicesData = (requestResponse) => {
var mainServicesArray = [];
const fetchedServicesArray = requestResponse.option;
var serviceDetailsFinal = {};
fetchedServicesArray.forEach(element => {
var titleService = element.acf.service_title;
var serviceDetails = {
"serviceTitle": element.acf.service_title,
"serviceIcon": element.acf.icon.url,
"serviceSliderIcon": element.acf.slidericon,
"serviceContent": element.acf.content,
"category": element.acf.category,
"slidertitle": element.acf.slidertitle,
"slidersubtitle": element.acf.slidersubtitle,
};
serviceDetailsFinal[titleService] = serviceDetails;
});
return serviceDetailsFinal;
};
const Strategy = ({state}) => {
const responseData = state.source.get("acf-services-page");
const servicesDataObject = fetchedServicesData(responseData);
const strategyObject = servicesDataObject.Strategy;
// console.log(responseData);
const cagtegoryName = strategyObject.category['name'];
console.log(strategyObject.serviceContent);
return(
<>
<div className="wp-page-content">
<Row className="services_section_top">
<Col
className="container1"
sm={12} md={12}
css={css`
background-image: url(${strategyObject.serviceSliderIcon});
`}
>
<div className="carousel-caption">
<h1>{strategyObject.slidertitle}</h1>
<p>
{strategyObject.slidersubtitle}
</p>
</div>
</Col>
</Row>
<Container>
<div className="page-headline">
<div className="service-summary-icon">
<img className="img-responsive" src={strategyObject.serviceIcon} alt="strategy" />
</div>
<div class="text-center">
<h4 class="text-pink text-uppercase">{cagtegoryName}</h4>
<h1 class="xl">{strategyObject.serviceTitle}</h1>
</div>
</div>
</Container>
<Container className="single-post service-content">
<Row>
<Col sm={12} md={12} className="single-post-content theme-services" dangerouslySetInnerHTML={{__html: strategyObject.serviceContent}}>
</Col>
</Row>
</Container>
</div>
<Global styles={css(servicesSectionsCss)} />
</>
);
};
export default connect(Strategy);
I was using a tag. But Frontity gives <Link></Link> tag to solve this issue. In which the route e.g., actions.router.set has already been set.
For reference, I used the doc:
https://docs.frontity.org/api-reference-1/router
2 Likes
