1

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
                })
              ]
            }
          ]
        }
      ]
    };
  }
|improve this question
  • Do you have a full solution for this? Would really like to see the code. Have you done it with v4 api ? react-router-dom? – Ludwig Hallgren Aug 24 '17 at 10:38
  • @user1983262 I no longer work on it so dont quite remember – PQ Thắng Aug 24 '17 at 13:31
1

It turned out that I used Link component from office-ui-fabric-react and its href property does not work as to property of Link component from react-router

This will not work

import * as React from "react"
import {AlphabetChars} from "../constants"
import {Link} from "office-ui-fabric-react/lib/Link"

const AlphabetCharsList = ({alphabetChars}) => {
    return (
        <div>
          {
              alphabetChars.map((char) => 
              <div key={char.romaji}>
                <Link href={"/contacts/" + char.romaji}>{char.hiragana}/{char.romaji}</Link>
                <br/>
                </div>
              )
          }  
        </div>
    )
}

export default AlphabetCharsList

But this does!

import * as React from "react"
import {AlphabetChars} from "../constants"
import {Link} from "react-router"

const AlphabetCharsList = ({alphabetChars}) => {
    return (
        <div>
          {
              alphabetChars.map((char) => 
              <div key={char.romaji}>
                <Link to={"/contacts/" + char.romaji}>{char.hiragana}/{char.romaji}</Link>                    
                <br/>
                </div>
              )
          }  
        </div>
    )
}

export default AlphabetCharsList
|improve this answer
0

you can use createMemoryHistory

|improve this answer
  • I tried but it work only for this route on first load <Route path="/" component={AlphabetScreen}> <IndexRoute component={AlphabetScreen}/>. When I call to this route <Route path="contacts/(:char)" component={SearchScreen}/>, it will redirect to mysites/contacts/a for example, and of course it will not be loaded. I think it should be mysites/mypage/contacts/a – PQ Thắng Jan 9 '17 at 2:19
  • Here'shat works for me (its using redux as well):const store: Redux.Store<any> = configureStore({}); const history = createMemoryHistory(location); const App: React.StatelessComponent<any> = () => ( <Provider store={store}> <Router history={history}> {routes} </Router> </Provider> ); – russellg Jan 9 '17 at 13:50
  • Thank @russellg. It turned out that I used Link component from office-ui-fabric-react and its href property does not work as to property of Link component from react-router – PQ Thắng Jan 9 '17 at 16:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.