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

时间：2018-09-01 23:53:17 阅读：219 评论：0 收藏：0 [点我收藏+]

标签：fun 路径名 func white size 执行 one ret com

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.路由视图的格式：

//只能放置一个根元素比如一个div

<div>

//视图里，如果要实现内容相对应的跳转

//决定什么路径显示什么组件

</div>

</router>

4.动态路由：一个组件要根据路由变量显示不同的内容，路由变量通过props传值

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进行传值

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

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

标签：fun 路径名 func white size 执行 one ret com

原文地址：https://www.cnblogs.com/Dark-fire-liehuo/p/9571633.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行