Use SPFx with react-router

Question

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
                })
              ]
            }
          ]
        }
      ]
    };
  }

Answer 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

Answer 2

you can use createMemoryHistory