How I built a simple react-navigation clone in 5 minutes
React navigation is a really powerful library. But you often don't need that much.
Building your library for this case teaches you a lot about React Context API and how simple the navigation in a SPA happens.
Integration
export function App() {
return (
<NavProvider>
<Router></Router>
</NavProvider>
)
}Defining our routes
export function Router() {
const navContext = useContext(NavContext)
switch (navContext.current.path) {
case 'cockpit':
return <Cockpit />
default:
return (
<header>
<Navbar />
</header>
)
}
}Under the hood?
export function NavProvider({ children, entryPath }) {
const [current, setCurrent] = useState({ path: entryPath, params: {} })
const [history, setHistory] = useState([current])
const loadFromHash = () => {
const pathFromHash = window.location.hash.split('#')[1]
setCurrent({ path: pathFromHash })
setHistory([{ path: pathFromHash }])
}
useEffect(() => {
window.addEventListener('hashchange', (e) => loadFromHash())
loadFromHash()
}, [])
const updateCurrent = ({ path, params }) => {
window.location.hash = `${path}`
setCurrent({ path, params })
}
const push = (path, params) => {
setHistory((prev) => [...prev, { path, params }])
updateCurrent({ path, params })
}
const back = () => {
history.pop()
const previousItem = history[history.length - 1]
setHistory(history)
updateCurrent(previousItem)
}
return (
<NavContext.Provider
value={{ setCurrent: updateCurrent, current, push, back }}
>
{children}
</NavContext.Provider>
)
}Does your component need access to params?
No problem!
export function Cockpit() {
const { current } = useContext(NavContext)
const navParams = current.params
return <p>{JSON.stringify(navParams)}</p>
}Do you want to navigate back and forth?
No problem! You can just use the push and back API from our NavContext.
Conclusion
In most cases, you should go with react-navigation. It will save you a lot of time and just don't reinvent the wheel. However, within a side project that has just too few features to matter, you might learn a lot about routing from implementing it yourself.
