[Preact] Integrate react-router with Preact
React with Router
2023-09-14 09:00:51 时间
React-router is the community favourite routing solution - it can handle all of your complex routing needs and in this lesson we’ll cover what’s needed to enable it’s use within Preact. https://github.com/ReactTraining/react-router
in webpack.config.js:
resolve: { alias: { 'react': 'preact-compat', 'react-deom': 'preact-compat' } },
Add resolve block. it alias 'react' to use 'preact-compat'.
Change Route definations.
import {h} from 'preact'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import Profile from './Profile'; import Home from './Home'; import Error from './Error'; export default function App() { return ( <Router> <Switch> <Route path='/' component={Home} exact /> <Route path='/profile/:user' component={Profile} /> <Route component={Error}></Route> </Switch> </Router> ); }
Using 'Switch' to allow only one component showing at a time.
Dealing with navigation:
import { h } from 'preact'; import {withRouter} from 'react-router-dom'; function search(router, query) { router.history.push(`/profile/${encodeURIComponent(query)}`); } const Home = withRouter((router) => { return ( <section> <p>Enter a Github Username</p> <input type="search" placeholder="username" onSearch={e => search(router, e.target.value)} /> </section> ); }); export default Home;
We can use High Order component 'withRouter', it inject 'router' param into our component, then we can use:
router.history.push(`/profile/${encodeURIComponent(query)}`);
to nav around.
Get router params:
componentDidMount() { const username = this.props.match.params.user; fetch(`${config.url}/${username}`) .then(resp => resp.json()) .then(user => { this.setState({ user, loading: false }); }) .catch(err => console.error(err)); }
You can get the router param by using:
const username = this.props.match.params.user;
Link tag:
import {h} from 'preact'; import {Link} from 'react-router-dom'; export default Error = () => ( <div> <h2>Error!</h2> <Link to='/'>Home</Link> </div> );
相关文章
- 实现拖拽复制和可排序的react.js组件
- React 实践项目 (一)
- [React] useCallback + useMemo to avoid re-render
- [React] Debug Custom React Hooks With useDebugValue
- [React Testing] Test react-router-dom Router Provider with createMemoryHistory
- [React] Understand the React Hook Flow
- [React] Reduce Code Redundancy with Custom React Hooks
- [React] Detect user activity with a custom useIdle React Hook
- [Cypress] Test React’s Controlled Input with Cypress Selector Playground
- [React] Keep Application State in Sync with Browser History
- [React Testing] Element types with Shallow Rendering
- react redux 相关技术
- [React Testing] Create a Custom Render Function to Simplify Tests of Redux Components
- [React Testing] Test react-router-dom Router Provider with createMemoryHistory
- [React] Write a Custom State Hook in React
- [React] Validate React Forms with Formik and Yup
- [React] Create and import React components with Markdown using MDXC
- [Recompose] Compose Streams of React Props with Recompose’s compose and RxJS
- [Parcel] Bundle a React App with Parcel
- [React] Stop Memory Leaks with componentWillUnmount Lifecycle Method in React
- [React] Close the menu component when click outside the menu
- [React Router v4] Style a Link that is Active with NavLink
- [React Testing] Reusing test boilerplate
- React页面设计初体验