标签：lex round row targe time class config section console
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> );
[Preact] Integrate react-router with Preact
标签：lex round row targe time class config section console
原文地址：http://www.cnblogs.com/Answer1215/p/7054400.html
