We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React-router英文文档 初探 React Router 4.0 React-router中文文档
npm install react-dom npm install react-router-dom
DEMO如下
var React = require('react'); var ReactDom = require('react-dom'); import {BrowserRouter as Router, Route, Link} from 'react-router-dom' //先获取组件(创建组件)再使用 var AppComponent = require('./components/productBox.jsx'); var Wscats = require('./components/wscats.jsx'); ReactDom.render(( <Router> {/*rouer只能有一个子标签,所以用div包起来*/} <div> <ul> <li> <Link to="/">/</Link> </li> <li> <Link to="/index">index</Link> </li> </ul> <Route exact path="/" component={AppComponent}/> <Route path="/index" component={Wscats}/> </div> </Router> ), document.getElementById('content'))
在React的使用中,我们一般要引入两个包,react 和react-dom,react-router和react-router-dom并不是两个都要引用的 他们两个只要引用一个就行了,不同之处就是后者比前者多出了<Link><BrowserRouter>这样的 DOM 类组件。 因此我们只需引用react-router-dom这个包就行了。当然,如果搭配 redux,你还需要使用react-router-redux或者react-redux
<Link><BrowserRouter>
react-router4的文档用的是BrowserRouter,BroswerRouter是需要服务端配合的,服务端重定向到首页,BrowserRouter是基于html5的pushState和replaceState的,很多浏览器不支持,存在兼容性问题。所以新手推荐使用HashRouter
BrowserRouter,BroswerRouter
BrowserRouter
pushState
replaceState
HashRouter
BrowserRouter在不兼容的浏览器上会有诸多问题,比如路由嵌套的时候刷新页面空白无法直接进入嵌套路由,路由跳转也有可能不成功
import {BrowserRouter as Router, Route, Link, Redirect} from 'react-router-dom' import {createBrowserHistory} from 'history' const history = createBrowserHistory() <Router history={history}> //code </Router> //后面就可以使用history.push('/wscats');跳转地址为 url+/wscats
import {HashRouter, Route, Link, Redirect} from 'react-router-dom' import {createHashHistory} from 'history' const history = createHashHistory() <HashRouter history={history}> //code </HashRouter> //后面就可以使用history.push('/wscats');跳转地址为 url+#/wscats
父路由要这么写
<Provider store={store}> <Router> <div> <Route path="/" exact component={Whome} /> <Route path="/home" component={Whome} /> <Route path="/detail/" component={Wdetail} /> </div> </Router> </Provider>
子路由,嵌套路由/home/hot,记得加上/home
/home/hot
/home
<Route path="/home/hot" component={Wchanel} /> <Route path="/home/fresh" component={Wchanel} />
The text was updated successfully, but these errors were encountered:
No branches or pull requests
参考文档
React-router英文文档
初探 React Router 4.0
React-router中文文档
安装
DEMO如下
react-router和react-router-dom的区别
在React的使用中,我们一般要引入两个包,react 和react-dom,react-router和react-router-dom并不是两个都要引用的
他们两个只要引用一个就行了,不同之处就是后者比前者多出了
<Link><BrowserRouter>
这样的 DOM 类组件。因此我们只需引用react-router-dom这个包就行了。当然,如果搭配 redux,你还需要使用react-router-redux或者react-redux
路由传参
BrowserRouter和HashRouter的区别
react-router4的文档用的是
BrowserRouter,BroswerRouter
是需要服务端配合的,服务端重定向到首页,BrowserRouter
是基于html5的pushState
和replaceState
的,很多浏览器不支持,存在兼容性问题。所以新手推荐使用HashRouter
BrowserRouter
BrowserRouter在不兼容的浏览器上会有诸多问题,比如路由嵌套的时候刷新页面空白无法直接进入嵌套路由,路由跳转也有可能不成功
HashRouter
路由嵌套
父路由要这么写
子路由,嵌套路由
/home/hot
,记得加上/home
The text was updated successfully, but these errors were encountered: