1.安装：为了让react支持路由，需要安装react-router-dom
npm i react-router-dom@4.3.1 //命令行
2.引入组件BrowserRouter：
//引入
import {BrowserRouter} from "react-router-dom";
//如何使用
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
registerServiceWorker();
像下面的browserouter组件记录了浏览器的历史，并传入各组件树🌲成员，组件树🌲中的任何组件都可以使用“历史对象”,这也是这个组件的用途
3.注册：引入Route组件；满足path里面的条件，渲染后面对应的组件；举个🌰；如果url满足/products，就渲染后面的Products组件，其他的同理。
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="content">
<Route path="/products" component={Products}/>
<Route path="/posts" component={Posts}/>
<Route path="/admin" component={Dashboard}/>
<Route path="/" exact component={Home}/>// 确保只有在“完全匹配”的时候才会显示后面的组件
</div>
</div>
);
}
}
export default App;
4.Switch组件：<Switch> 会遍历嵌套的所有 <Route />，并且只渲染第一个匹配的 <Route />，这对于当有多个 <Route /> 同时匹配的时候，排除那些不想要渲染的 <Route /> 时非常有用。
同样是通过react-router-dom引入；
// path 为 '/about' 时，3 个 Route 将同时匹配
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
</Switch>
// 如果不使用 Switch，404 则会一直渲染
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
// 当上面都不匹配时，渲染 404 页面
<Route component={NoMatch} />
</Switch>
5.Link组件：<Link> 组件会生成有路由切换功能的 <a> 标签。(和直接使用a标签的路由不同的是，Link不会在每次点a标签的时候重新发请求)
过程：
link组件里的a标签还有一个onclick函数.png
如上图所示，当我们点击a标签🏷️的时候，句柄被调用，阻止了a标签原本的行为，所以浏览器没有发新的请求，因为被调用的句柄只会更新url，而url改变，路由就会匹配url并渲染新的组件。
6.传入属性：传属性需要将component换成render并添加箭头函数，箭头函数里面使用组件，并正常传入属性即可。传入props是因为Route自己还有默认属性，所以箭头函数要传入props参数，在保留旧的原有的属性的前提下，添加新的。
（如果不传入props参数，在控制台查看的时候会发现，之前的诸如location等属性不见了）
<Switch>
<Route path="/products" render={(props)=><Products sortBy="OGM" {...props}/>}/>
//传属性需要将component换成render并添加箭头函数，箭头函数里面使用组件，并正常传入属性即可。
<Route path="/posts" component={Posts}/>
<Route path="/admin" component={Dashboard}/>
<Route path="/"component={Home}/>
</Switch>
控制台显示最终结果：
传入props参数后
7.路由的参数：
a）传递路由参数：/:+参数
b)可选参数：/:+参数？（让传递的参数可以可有可无）
<Switch>
<Route path="/products/:id" component={ProductDetails} />
<Route path="/products" render={(props)=><Products sortBy="OGM" {...props}/>}/>
<Route path="/posts/:year/:mouth" component={Posts}/>
<Route path="/admin" component={Dashboard}/>
<Route path="/"component={Home}/>
</Switch>
b)处理： 通过props.match.params+属性字段获得传递的参数
const Posts = ({match}) => {
return (
<div>
<h1>Posts</h1>
Year:{match.params.year} , Month:{match.params.month}
</div>
);
};
8.查询字符串：
例如：http://localhost:3000/posts/2018/06?srotBy=newwst&approved=true
“?srotBy=newwst&approved=true”就是要查询的字符串。
在react控制台中的“对应组件”中可以看到，在props的location的search属性中可以看到要查询的字符串。如果要获取的话，可以通过插件queryString来获取。
关于query-string：
//安装
npm i query-string@6.1.0
//引入以及使用
import React from "react";
import queryString from "query-string";
const Posts = ({match,location}) => {
const result=queryString.parse(location.search);
console.log(result);
return (
<div>
<h1>Posts</h1>
Year:{match.params.year} , Month:{match.params.month}
</div>
);
};
export default Posts;
9.路由嵌套：
//sidebar组件
import React from 'react';
import {Link} from "react-router-dom";
const SideBar = (props) => {
return (
<ul>
<li>
<Link to="/admin/posts">Posts</Link>
</li>
<li>
<Link to="/admin/users">Users</Link>
</li>
</ul>
);
}
export default SideBar;
//父级组件
import React from "react";
import SideBar from "./sidebar";
import {Route} from "react-router-dom";
import Posts from '../posts';
import Users from './users';
const Dashboard = ({ match }) => {
return (
<div>
<h1>Admin Dashboard</h1>
<SideBar/>
<Route path="/admin/posts" component={Posts}/>
<Route path="/admin/users" component={Users}/>
</div>
);
};
export default Dashboard;
Link用于改变url;Router主要是在url变化的时候渲染出对应的组件来;
网友评论