This is just silly.
Seriously. Don't even look at this silly React router.
Matched route components have a new prop.
route
name
: Name of the matched routepath
: Matched pathparams
: Matched route parameters
A route with path
undefined matches all requests.
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;