react路由的安装及格式和使用方法

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('路径名称')，跳转到相对应的路径