一篇文章让你会用react路由

react路由

安装 react-router-dom

npm安装   npm i react-router-dom
yarn安装  yarn add react-router-dom

下载到生产环境的依赖中。

引入模块

在react脚手架src目录下的 index.js里引入安装好的react-router-dom插件

import { BrowserRouter as Router } from 'react-router-dom'

• 我们看到中间有一个as
• 这个 as 的意思是给当前的名字起一个小名，别名；
• 我们原本是要引入BrowserRouter ,但是这个名字好像太长了,也不好看，
• 那么我们就使用Router 来代替 BrowserRouter ；
• 如果使用hash路由 把BrowserRouter修改成HashRouter
• 然后使用我们的别名也就是Router包裹着APP组件;

ReactDOM.render(
  <Router>
    <App />
  </Router>, document.getElementById('root'));

引入路由

• 在我们需要使用路由跳转的组件里引入react-router-dom

import { Route,NavLink,Redirect,Switch} from 'react-router-dom'

Route

• 是一个很关键的组件，它用来控制不同的路径所对应的不同组件或者页面显示，
• 常用的属性有：

1. path：要匹配的路径
2. component：要匹配的组件

NavLink

• NavLink 是 Link 的一个特定版本, 会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数 active 可以设置点击颜色

Redirect

• 用于路由重定向

• 属性

  1. to 字符串，要重定向的路径
  2. from，用来指定路由的原始值,如果不是给定的字符串,那么不渲染，反之渲染,只能用于switch组件中

Switch

• Switch组件内部可以是Route或者Redirect，只会渲染第一个匹配的元素

路由使用

//我们有两个组件已经引入  组件one  组件two
export fefault class App extends Component{
  render(){
    return(
	  <div>
		 <NavLink to='one'>one组件</Navlink>
		 <NavLink to='two'>two组件</Navlink>
				
		 <Switch>
       	   <Route path="/one" component={one} />
     	   <Route path="/two" component={two} />
      	   <Redirect from='/' to='/one' exact/>   {/* 精准定位重定向 */}
         </Switch>{/*如果多个组件匹配  只渲染第一个*/}
	  </div>
		)
	}
}

跳转子路由

• 跳转后必须配置 Route 进行渲染
• 俩个配置路径的必须配全路径，父路径/子路径

路由的初体验 你会了嘛？