目前加载3.0版本的路由:cnpm install --save [email protected],安装3.0版本的路由;
学习资料:https://react-guide.github.io/react-router-cn/docs/guides/basics/RouteConfiguration.html
引包:
import {Router,Route,Redirect, IndexRoute,hashHistory} from 'react-router';//引入路由
render(){
//debugger
return(
<div>
<Router history={hashHistory}>
<Route path="/" component={Hello}/>
<Route path='/news' component={News}/>
<Route path='/son' component={Son}/>
</Router>
</div>
)
}
}
ReactDOM.render((<Index/>),document.getElementById("root"))
ReactDOM.render((<Index/>),document.getElementById("root"))
同级路由的跳转,也就是一级路由;
路由传参:在地址栏是可见参数的;传递的参数是字符串/布尔值/数字等基本数据类型;对象或数组无法传递;
通过https://react-guide.github.io/react-router-cn/docs/API.html的API文档,可知,进入跳转的页面,可以通过{this.props.params.(传递的参数名)};
具体见代码:
路由文件
<Router history={hashHistory}>
<Route path="/" component={Hello}>
<IndexRoute component={Hello}/>
</Route>
<Route path='news/:num/:id' component={News}/>
<Route path='son' component={Son}/>
<Route path='home' component={Home}/>
</Router>
点击页面;
<div>
<Link to={`/news/0/${this.state.id}`}>新来的</Link>
<br/>
<Link to='news/1/我的未来'>不是新来的</Link>
<br/>
<Link to='news/2/爱的味道'>你觉得呢</Link>
</div>
跳转到的页面
<div className="hello">
我是bushi新来的!
{
//this.props.params.
}
{this.props.params.num}
{this.props.params.id}
</div>
多个链接跳转到同一个页面;
接下来讲的是二级路由嵌套:
<Route path="/" component={Hello}>
<Route path='son' component={Son}/>
<Route path='home' component={Home}/>
</Route>
显示ui通过this.props.children进行ui显示;不然就无法显示ui;
多级路由嵌套也就类似于此种方法;
默认路由:
<Router history={hashHistory}>
<Route path="/" component={Hello}>
<IndexRoute component={Son}/>
<Route path='home' component={Home}/>
<Route path='now' component={Now}/>
</Route>
<Route path='news/:num/:id' component={News}/>
</Router>
组件外部跳转:
hashHistory.push('/news/0/window')
react路由4.0版本的路由可以直接加载react-router-dom
注意几点:加载引包import,在react-router中会有两种模式,一种是hash模式,另外一种 浏览器模式(利用了history),下文重点介绍好hash模式,hash模式上线本地开发都是非常方便的,而BrowserRouter在上线的时候会比较麻烦一点,需要服务器的配置也会更麻烦一些。
import {
HashRouter,
BrowserRouter,
Route,
Link
} from 'react-router-dom'
在index.jsx文件中
<HashRouter>
<RouterIndex />
</HashRouter>
页面内路由跳转(路由文件router.jsx);
<Switch >
<Route exact path="/" component={() => loginQX==1?<Redirect to='/index' />:<Login />}/>
<Route path="/index" component={props => <Index {...props} />}/>
<Route path='/detail' component={Detail} />
<Route component={() => <div>404</div>} />
</Switch>
这里需要通过exact这个属性表示完全匹配,实现单页面跳转,简称一级路由(父级【‘/index’】)
接下来我们将一级路由跳转进行分割开,有点感觉就是将路由进行组件化
二级子路由的页面内跳转:
<div>
<NavLink to={`${match.url}/main`}>资产</NavLink >
<NavLink to={`${match.url}/mine`}>我的</NavLink >
<Switch location={location}>
<Route path={`${match.url}/mine`} component={Mine} />
<Route path={`${match.url}/main`} component={Main} />
<Route render={() => <div>Not Found</div>} />
</Switch>
</div>
exact: bool
若为 true,只有当访问地址严格匹配时激活样式才会应用
strict: bool
若为 true,只有当访问地址后缀斜杠严格匹配(有或无)时激活样式才会应用
单级路由跳转完成严格匹配的跳产生的,多级路由跳转访问斜杠后进行激活产生的。
通过以上的操作可以完成各级的路由的转换。
路由传参:传参方式,跟3.0版本一样,调取有些不一样,通过{match}获取参数;但必须要作为第一个参数;
class Son extends Component{
constructor({match},props,context){
super()
console.log(match);
console.log(props);
//console.log(context);
this.state={
match:match
}
}
render(){
return(
<div className="hello">
组件传递问题!
{this.state.match.params.id}
</div>
如果在路由4.x中不存在history问题,下面的代码可以帮助你,一般不生成history是因为你采用了xxx as Router,这样的代码利用Router代理hashRouter这样没有将这个history给继承过来。以上是我基础配置react-router4.x问题。
import createHistory from 'history/createBrowserHistory';
const history = createHistory()
<HashRouter history={history}>
<RouterIndex />
</HashRouter>