React路由学习整理

路由组件

//路由容器，显示组件
<BrowserRouter></BrowserRouter>//不带#号url
<HashRouter></HashRouter>//带#号url

<Redirect></Redirect>//重定向     exact设置精准匹配
<Route></Route>//设置路由规则   
<Link></Link>//跳转路由
<NavLink></NavLink>//跳转路由,不同的是NavLink会给设置一个class='active',也可以通过 activeClassName="???"改变class名
<Switch></Switch>  //用于渲染与路径匹配的第一个  或 

基本使用：

//首先在react根入口文件使用Switch
	<BrowserRouter>
      {/*使用BrowserRouter管理整个路由*/}
      <App></App>
    </BrowserRouter>
//然后在App组件来定义路由
		//配置路由
	  <NavLink to={'/about'}>about</NavLink>
      <NavLink to={'/home'}>home</NavLink>
      //显示路由
      <div>
        <Switch>{/* 只显示其中一个用switch包起来*/}
          <Route exact path='/about' component={About}></Route>//exact设置精准匹配
          <Route exact path='/home' component={Home}></Route>
          <Redirect to='/about' exart/>//重定向
        </Switch>
      </div>

嵌套路由

//直接在父组件中定义
		<div>
        <h2>home的内容</h2>
        <NavLink to='/home/news'>news</NavLink><br />
        <NavLink to='/home/message'>message</NavLink>
        <div>
          <Switch>//用于渲染与路径匹配的第一个  或 
           <Redirect exact to='/home/news'></Redirect>
            <Route exact path="/home/news" component={News}></Route>//exact设置精准匹配
            <Route exact path="/home/message" component={Message}></Route>
          </Switch>
        </div>
      </div>

传递参数

//父级路由组件中配置
 		<NavLink to={`/messagedetail/6`}>Messagedetail</NavLink>
 		<a href={`/messagedetail/6`}>Messagedetail</a>//非路由链接，会发送请求
        <div>
          <Redirect to="/messagedetail"></Redirect>
          <Route path="/messagedetail/:id" component={Messagedetail}></Route>
        </div>
//子级路由组件中配置
 		const { id } = this.props.match.params//获取传递过来的路由参数
    		return (
     		 <div>
        		{id}
      		</div>
    		)