import { Router } from 'sillyrouter';
 
import Home from './components/Home.js';
import AboutUser from './components/AboutUser.js';
import NotFound from './component/NotFound.js';
 
const routes = [
  {name: 'home', path: '/', component: Home},
  {name: 'aboutUser', path: '/user/:userId', component AboutUser},
  {name: 404, component: NotFound},
];
 
ReactDOM.render(
  <Router routes={routes}/>
  document.getElementById('root')
);

import { Link, navigate } from 'sillyrouter';
 
class Home extends React.PureComponent {
  aboutFirstUser = () => {
    navigate('aboutUser', {userId: 1});
  }
 
  render() {
    return (
      <div>
        <Link to="aboutUser" userId={1}>About our first user</Link>
        <button onClick={aboutFirstUser}>About our first user</button>
      </div>
    );
  }
}
 
export default Home;

class AboutUser extends React.PureComponent {
  render() {
    return (
      <div>
        User ID: {this.props.route.params.userId}
      </div>
    );
  }
}
 
export default AboutUser;