Hash路由

  • 其实就是借着a标签的href属性 href=’#/’ , #号是必须有的

    History路由

    History 路由比较特殊，不可以直接访问数据，必须先访问一下首页，要不然报错404，还有就是必须在服务器上运行

  • 主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件

#因此需要进入到index.html中，然后交给路由在处理请求资源

React中的路由：

  1. 首先下载npm install react-router-dom —save
  2. 然后引入import { BrowserRouter ，route ，Switch} from ‘react-router-dom’
  • BrowserRouter 代表的整个react项目的路由入口模块
  • 一个项目里面只能有一个BrowserRouter，也就是只能有一个入口（子级路由在的话，父级路由一定在）
  • Exact配置属性代表的是将现有的包含匹配方式改成全字精准匹配（但是只局限于配置了这个属性的模块）
  • Switch这个模块用法和js中的switch差不多，都是判断
  • this.props.match.params.id 可以获取动态路由的数据
  • import { withRouter , Link} from ‘react-Router-dom’ withRouter其实就是个高阶组件帮助没有配置过路由的模块获取信息

image.png

  1. <Link to='/a'>a</Link>
  2. <NavLink to='/b'>b</NavLink>
  1. React中提供给我们了一个Link组件
  2. NavLink 多给我们提供了一个activeStyle=={{ color: ‘red’, fontSize: ‘20px’ }} 添加样式 , 还有一个activeClassName 就是我们选中时候添加的类名，也就是执行的样式
  3. Redirect 从定向的组件