react路由的安装:
在要创建项目的目录命令窗里输入:
cnpm install -g create-react-app
create-react-app 项目名
在创建好的项目目录命令窗里输入:
cnpm install react-router-dom --save(此处可以不用--save但是为了方便别人调用你的包时。更快捷的安装好依赖包,我们就得要写了,(cnpm install命令可以自动安装路由依赖文件))
2.根据路径,显示相应的组件
,
JSX路由的写法,路由的jsx组件
const Basic = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/page1">Page1</Link></li>
<li><Link to="/page2/123">Page2</Link></li>
</ul>
<hr/>
<Route exact path="/" component={App}/>
<Route path="/page1" component={Page1}/>
<Route path="/page2/:id" component={Page2}/>
</div>
</Router>
)
exact:表示精确路劲
3.路由视图的格式:
<router>
//只能放置一个根元素比如一个div
<div>
//视图里,如果要实现内容相对应的跳转
<Link to='路径'></Link>
//决定什么路径显示什么组件
<route path='路径' component={组件名}>
</div>
</router>
4.动态路由:一个组件要根据路由变量显示不同的内容,路由变量通过props传值
<route path='/路径名/:变量名称' component={组件名}>
function Page2(props){
props.match.params.变量名称
return 相应的视图
}
3/路由试图的格式:
<Router>
//这里只能放置1个根元素
<div>
//试图里,如果需要内容的相对应的跳转,那么需要使用<link>
<Link to='/page1'>进入page1页面</Link>
//决定什么路径显示什么组件
<Route path='/page1' component={App} >
</div>
</Router>
4/动态路由:1个组件要根据,路由变量从而显示不同的内容,路由变量通过props进行传值
<Route path='/page2/:变量名称' component={Page2} >
function Page2(props){
//通过props里的match属性获取相对应的变量
props.match.params.变量名称
return 相对应的试图
}
5/JS执行页面跳转
this.props.history.go(),前进/后退页面
this.props.history.goback(),返回页面
this.props.history.goforward,前进页面
6//路径直接跳转
this.props.history.push('路径名称'),跳转到相对应的路径