react中router使用方式
react路由有两种:BrowserRouter和HashRouterBrowserRouter原理是H5的historyAPI地址栏没有#号通过高阶组件的属性代理方式,将match, location, history以props的形式传递给routeimport {Switch, Route, Link, BrowserRouter as Router} from 'reac...
·
react路由有两种:BrowserRouter和HashRouter
BrowserRouter原理是H5的historyAPI
地址栏没有#号
通过高阶组件的属性代理方式,将match, location, history以props的形式传递给route
import {Switch, Route, Link, BrowserRouter as Router} from 'react-router-dom'
render() {
let obj = {
pathname: '/component',
search: 'sort=name',//可以加?也可以不加;放在url上,获取在location中;
test: { fromDashboard: 123 },//刷新报错。
state: { fromDashboard: 123 },
query: { fromDashboard: 123 }
}
var state = {
pathname: '/state',
state: '我是通过state传值'
}
return (
<Router>
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo"/>
<h1 className="App-title">Welcome to React</h1>
</header>
<div className="App-intro">
<div><Link to="/path/通配符">通配符</Link></div>//在match中,获取值;在地址栏显示;
<div><Link to={obj}>component</Link></div>
<div><Link to={state}>state</Link></div>
</div>
<div>
<h3>内容</h3>
<Switch>
<Route path='/path/:name' component={Path}/>
<Route path="/component" component={Query}/>
<Route path='/state' component={State}/>
<Route path='/*' component={Home}/>
</Switch>
</div>
</div>
</Router>
);
}
let obj = {
pathname: '/component',
search: '?sort=name',
test: { fromDashboard: 123 },
state: { fromDashboard: 123 },
query: { fromDashboard: 123 }
}
这些参数都可以在location中找到,但是search可以显示在标题栏中;并且用该参数可以刷新,search中的值,会自动添加?
match, location上面代码已经讲了,history是传递给route路由js方法
可以前进后退,跳转;
如果要设置默认路由,有三种方式:
<Route path='/*' component={Home}/>
<Route component={Home}/>
<Route path='/' component={Home}/>
都加到Switch的末尾;
路由权限认证
随便写了一个demo
import React, {Component} from 'react';
import {Switch, Route, Link, HashRouter as Router} from 'react-router-dom'
import Path from './Path'
import Query from './Query'
import State from './State'
import Home from './Home'
import logo from './logo.svg';
import './App.css';
// HOC.js
const withAuth = Route => {
return class WithAuth extends Component {
state = {
permission: false,
}
async componentWillMount() {
var random=Math.random();
if(random<0.5){//在这里判断是否有权限查看该component;
this.setState({
permission: true
});
}else{
}
}
render() {
if (this.state.permission) {
return <Route {...this.props} />;
} else {
return (<div>您没有权限查看该页面,请联系管理员!</div>);
}
}
};
}
var WithAuth=withAuth(Route)
class App extends Component {
render() {
let obj = {
pathname: '/component',
search: 'sort=name',
test: { fromDashboard: 123 },
state: { fromDashboard: 123 },
query: { fromDashboard: 123 }
}
var state = {
pathname: '/state',
state: '我是通过state传值'
}
return (
<Router>
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo"/>
<h1 className="App-title">Welcome to React</h1>
</header>
<div className="App-intro">
<div><Link to="/path/通配符">通配符</Link></div>
<div><Link to={obj}>component</Link></div>
<div><Link to={state}>state</Link></div>
</div>
<div>
<h3>内容</h3>
<Switch>
<Route path='/path/:name' component={Path}/>
<WithAuth path="/component" component={Query}/>
<Route path='/state' component={State}/>
<Route path='/*' component={Home}/>
</Switch>
</div>
</div>
</Router>
);
}
}
export default App;
更多推荐
已为社区贡献1条内容
所有评论(0)