1.路由组件基础知识
1.1Router组件
路由根组件，我们的实际路由使用都是放在这个下面，我们基本不会修改
1.2Link组件（a标签）
链接渲染组件，最后其实就是渲染为我们的a标签，to属性转化为href属性
除了基本配置to还可以复杂配置，传参
1.3Route组件（实际渲染）
匹配渲染组件，当地址栏的地址和此组件的path属性匹配时，component属性设置的组件会被渲染
exact属性，是此组件的重要属性，true和false决定是否完全匹配
如果设置这个属性比如地址栏的地址是/New会渲染出我们的News组件
地址栏是/News/a就不会渲染
同样的，不设置我们的地址栏是/About和/About/a都是渲染出About组件，
path还支持路径参数匹配，比如
我们的地址栏是/About/a会渲染出我们的About组件，在About组件 我们可以通过
this.props.location获取
1.4Switch组件（404）
判断组件，如下面的例子，如果地址栏：
/About/Phone 渲染Phone组件
/About/Content渲染Content组件
/About 渲染Phone组件
当一个path匹配成功，下面就不会匹配，
我们可以在组后加一个404组件，如果用户手动打出了没有的地址：
1.5NavLink组件（导航active）
是Link的特殊版本，如果我们的导航需要active了，就是地址跳到对应页面这个a加一个特殊class可以树勇这个组件，
类型添加设置：
行内样式添加设置：
exact: bool
若为 true，只有当访问地址严格匹配时激活样式才会应用
1.6Redirect组件（重定向）
我们有的时候需要重定向处理，比如一个页面登录才可以看到，我们进入就会返回到其他页面，
我们就需要重定向组件的处理：
我们点击新闻页面，地址会变为/News,并且渲染News组件，在News组件的render返回了重定向组件，重点向的to设置的是/，那么地址就会位置/，显然出/地址对应的组件
to属性同理Link组件，可以是字符串或者对象
2.传参和获取
当我们跳转地址，可以设置参数，
2.1 ?形式，如url？id=1 参数是id=1
这种不用多说，非常简：
在对应组件页面我们就可以使用this.props.location获取：
2.2 地址形式，/url/1,参数是1
如过在用这种方式，我们的设置页面如下：
实际渲染要设置匹配模式：
在对应组件页面我们就可以使用this.props.location获取：
进入我们的渲染组件页面，我们地址的内容会自动在组件的this.prop.location获取各种值，
3.嵌套路由
嵌套路由可以举例为在关于我们页面，又包含联系我们和公司介绍
所以在关于我们组件会如下配置：
其实和外配路由配置没有任何区别，不过在外层配置我们对于有嵌套路由的path要删除exact属性，避免完全匹配不显示问题
如果关于我们有exact 的设置值，那么只有：
/About才会渲染，
/About/Phone和/About/Content就不会渲染，这样About就不存在了，就更不要说显示About下面的组件了。
Route组件的设置非常重要！！！
4.当前代码（参数传递和接收，嵌套路由）
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
} from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';
//组件 主要框架结构
import App from './App.js';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
);
registerServiceWorker();App.js
import React, { Component } from 'react';
import {
Route,
Link
} from 'react-router-dom';
//组件 各个组件
import Home from './page/Home.js';
import News from './page/News.js';
import About from './page/About.js';
import NewsDetail from './page/NewsDetail.js';
class App extends Component {
render() {
return (
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/News">News</Link></li>
<li><Link to="/About">About</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route exact path="/News" component={News}/>
<Route path="/About" component={About}/>
<Route path="/NewsDetail" component={NewsDetail}/>
</div>
);
}
}
export default App;
Home.js
import React, { Component } from 'react';
class Home extends Component {
render() {
return <div>首页</div>
}
}
export default Home;About.js
import React, { Component } from 'react';
import {
Route,
Link,
Switch
} from 'react-router-dom';
import Phone from './About/Phone.js';
import Content from './About/Content.js';
class About extends Component {
render() {
return <div>
<div>关于我们</div>
<ul>
<li><Link to="/About/Phone">联系电话</Link></li>
<li><Link to="/About/Content">公司介绍</Link></li>
</ul>
<Switch>
<Route path="/About/Phone" component={Phone}/>
<Route path="/About/Content" component={Content}/>
<Route path="/About" component={Phone}/>
</Switch>
</div>
}
}
export default About;Content.js
import React, { Component } from 'react';
class Content extends Component {
render() {
return <div>公司介绍</div>
}
}
export default Content;Phone.js
import React, { Component } from 'react';
class Phone extends Component {
render() {
return <div>联系电话</div>
}
}
export default Phone;News.js
import React, { Component } from 'react';
class News extends Component {
render() {
return <div>
<p>新闻中心</p>
<ul>
<li><a href="/NewsDetail?id=1">11111111111</a></li>
<li><a href="/NewsDetail?id=2">22222222222</a></li>
<li><a href="/NewsDetail?id=3">33333333333</a></li>
</ul>
</div>
}
}
export default News;NewsDetail.js
import React, { Component } from 'react';
class NewsDetail extends Component {
render() {
console.log(this.props)
return <div>
<p>新闻详情</p>
<div>{this.props.location.pathname}</div>
</div>
}
}
export default NewsDetail;