Мы работаем над одним доказательством концепции, в котором мы добавили один скрипт-тег с URL-адресом JavaScript другого сайта. И мы внедряем HTML-код Списка свойств, а также сведения о свойствах, которые отображаются при щелчке заголовка свойства с помощью React Js. Так что теперь мы должны реализовать маршрутизацию для части сведений о свойствах.
Пример:
Мы просим клиента добавить скрипт-тег на место, в котором он хочет отобразить список свойств.
<script src="http://provider_site_host/scripts/load-property.js"></script>
Таким образом, наш внедренный HTML является частью другого веб-сайта.
Таким образом, по умолчанию URL будет выглядеть, как показано в примере ниже
https://www.consumer_site.com
Итак, предположим, что страница по умолчанию на этом сайте содержит тег script, который мы просим клиента добавить, тогда список свойств будет отображаться в том месте, где добавлен тег script.
Нам это нужно, например, когда мы нажимаем на заголовок свойства, URL-адрес в браузере должен быть изменен в формате, подобном «https://www.consumer_site.com/property/property_Id/property_title", и должны отображаться сведения о соответствующих свойствах.
В настоящее время у нас есть три основных компонента:
- Компонент PropertyBox
- Компонент PropertyList
- Свойство Подробности компонента
В настоящее время подробности свойства отображаются с использованием события вact js, которое зарегистрировано в компоненте PropertyBox, и это событие будет вызываться по щелчку заголовка свойства, после чего мы переключаем текущий компонент на компоненты сведений о свойстве.
Код для переключения на компонент сведений о свойствах из компонента списка свойств выглядит следующим образом:
- Компонент PropertyBox:
class PropertyBox extends React.Component {
constructor(props) {
super(props);
this.state = {
/* data variable */
data: props.initialData,
searchValue: '',
/* property detail view variable */
showPropertyDetails: false,
propertyObject: null,
};
// register the events
this.searchProperty = this.searchProperty.bind(this);
this.updatePropertyInput = this.updatePropertyInput.bind(this);
/* handle page change event */
this.handlePageChanged = this.handlePageChanged.bind(this);
}
render() {
var renderPropertyDetails = this.renderPropertyDetails;
var backToPropertyList = this.backToPropertyList;
// this variable is used to show the property details or property list based on value of "showPropertyDetails"
// if showPropertyDetails = true then display the property details
// else display property list
let propertyElement
// check if property has images or not
if (this.state.showPropertyDetails == true) {
propertyElement = <div><PropertyDetails data={this.state.propertyObject} backToPropertyList={backToPropertyList.bind(this)} /></div>
}
else {
propertyElement = "<html of property list>"
}
return (
<div className="property-box col-sm-12">
{propertyElement}
</div>
);
// this function is setting state variable for property detail
loadPropertyDetails(propertyObject) {
// set the state with property object
this.setState({ propertyObject: propertyObject, showPropertyDetails: true });
// return true is set for Promise object for work further
return true;
}
// this function is used to display the property details on click of property title
renderPropertyDetails(propertyObject) {
// method is used to load property detail and later scroll to control top
return new Promise((resolve, reject) => { resolve(this.loadPropertyDetails(propertyObject)); })
.then(() => {
this.scrollToControlTop();
});
}
// this function is setting state variable for property list
loadPropertyList() {
// set the state with property object
this.setState({ showPropertyDetails: false });
/* https://www.fullstackreact.com/30-days-of-react/day-15/ */
// return true is set for Promise object for work further
return true;
}
// this function is used to display the property list on click on property detail page
backToPropertyList() {
// method is used to load property detail and later scroll to control top
return new Promise((resolve, reject) => { resolve(this.loadPropertyList()); })
.then(() => {
this.scrollToControlTop();
});
}
// this event will be called when text in changed in text box
updatePropertyInput(evt) {
if (evt.target.id == "txtSearch") {
this.setState({ searchValue: evt.target.value });
}
if (evt.target.id == "rbtnSale" || evt.target.id == "rbtnRent") {
this.setState({ propertyCategory: evt.target.value });
}
if (evt.target.id == "ddlPropertyType") {
this.setState({ propertyType: evt.target.value });
}
}
// this event will be called on search button click
searchProperty(event) {
event.preventDefault();
this.getPropertyData(this.state.propertiesPerPage, 0, this.state.searchValue, this.state.propertyCategory, this.state.propertyType);
}
// this event is used to fetch the property data from data base using web api
getPropertyData(){
// it contains code for getting the property data from the controller
}.bind(this);
}
- Компонент списка свойств:
class PropertyList extends React.Component {
getInitialState() {
return { showResults: false };
}
onClick() {
this.setState({ showResults: true });
}
render() {
var renderPropertyDetails = this.props.renderPropertyDetails;
var propertyRows = this.props.data.map((property, index) => {
return (
<div key={index} className="card mb-3">
// property list HTML
</div>
)
});
return (
<div className="propertyWrapper">
{propertyRows}
</div>
)
}
}
- Компонент сведений о недвижимости:
class PropertyDetails extends React.Component {
render() {
var property = this.props.data;
var backToPropertyList = this.props.backToPropertyList;
return (
<div className="row">
// html of property details
</div>
);
}
}
Все компоненты находятся на одной странице .jsx.
Я ожидаю изменения URL браузера в формате "https://www.consumer_site.com/property/propertyId/propertyTitle"
Текущий URL не изменился, отображается только компонент сведений о свойствах.
Есть ли пример маршрутизации реагирования, который мы можем реализовать в нашем доказательстве концепции?