I'm wondering how to handle multi-routes react webpart in SharePoint, since it's actually rendered inside a page and not run individually itself. I tried to implement a simple webpart with some routes and receive this error
[react-router] Location "/temp/workbench.html" did not match any routes
Please support me on working with multi-routes webpart
Below is my code in the ContactsWebPart.tsx (I changed from ts -> tsx)
export default class ContactsWebPart extends BaseClientSideWebPart<IContactsWebPartProps> {
public constructor(context: IWebPartContext) {
super(context);
}
public render(){
const element = (<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={AlphabetScreen}>
<IndexRoute component={AlphabetScreen}/>
</Route>
<Route>
<IndexRoute component={SearchScreen}/>
<Route path="contacts/(:char)" component={SearchScreen}/>
</Route>
</Router>
</Provider>)
ReactDom.render(element, this.domElement)
}
protected get propertyPaneSettings(): IPropertyPaneSettings {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}