react中router使用方式

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;

相关代码：https://github.com/newway7/react-router-test