react-router | steal-like-a-dev
Minimalist implementation of react-router. Primarily for teaching purposes in my StealLikeADev.com tutorial series, BUT since it's actually very usable, I decided to publish it as a NPM package as well.
These docs are "stolen" from react-router, but I've left only the parts I've actually implemented. Happy stealing!
Installation & usage
$ npm install @steal-like-a-dev/react-router
import { Route, Link, Redirect, Switch } from '@steal-like-a-dev/react-router';
API
<BrowserRouter>
<BrowserRouter>
I specifically built just this routing method - using normal URL's instead of hashes - so no need for this component.
<Route>
Props:
A React component to render only when the location matches. It will be rendered with route props.
Any valid URL path or array of paths.
! Routes without a path always match.
When true, will only match if the path matches the location.pathname exactly.
Props passed to rendered component
An object with one single property - params - which contains the values of all the matched params in the pathname. For example:
<Route path="/groups/:groupId/exercise/:exerciseId" component={TextComp}></Route>
function TextComp (props) {
return (
<div>
<h1> Group: {props.match.groupId} </h1>
<p> Exercise: {props.match.exerciseId} </p>
</div>
)
}
will render on this path /groups/Faculty/exercise/22
an h1
with text Faculty and a <p>
with text 22.
location: {
state: any, // Current route state
search: string, // String representation of query params
hash: hash, // Current location's hash
pathname: hash // Current pathname
},
An object with 2 functions used for navigating to a different page.
history: {
push(to: string, state?: any, replace?: boolean = false), // navigate forward to `to` URL, with an optional state that will be passed to the next route.
replace(to: string, state?: any) // navigate to `to` URL by replacing the current location in the navigation stack.
}
<Link>
Props:
A string representation of the Link location, created by concatenating the location’s pathname, search, and hash properties.
An object that can have any of the following properties:
to: {
pathname: string, // A string representing the path to link to
search: string, // A string representation of query parameters
hash: string, // A hash to put in the URL, e.g. #a-hash
sate: any // State to persist to the location
}
A function to which current location is passed as an argument and which should return location representation as a string or as an object
When true, clicking the link will replace the current entry in the history stack instead of adding a new one.
<Redirect>
The URL to redirect to
to: {
pathname: string, // A string representing the path to link to
search: string, // A string representation of query parameters
hash: string, // A hash to put in the URL, e.g. #a-hash
sate: any // State to persist to the location
}
When true, redirecting will push a new entry onto the history instead of replacing the current one.
Only redirect when on this current pathname.
This can only be used in conjunction with from to exactly match a location from which to redirect.
<Switch>
Renders the first <Route>
or <Redirect>
that matches the location.
How is this different than just using a bunch of <Route>
s?
<Switch>
is unique in that it renders a route exclusively. In contrast, every that matches the location renders inclusively.
Test project
As you can see, there's also a test project included in this repo. You can run it with
npm run test:dev
or
npm run test:prod
Further development & bugfixing
I won't be developing this library any futher because, well... there's already the original out there. But I'll be fixing bugs regarding features already implemented.
Made for learning/teaching purposes by Pava . Actually used in DevDrive