React路由学习整理

最新推荐文章于 2024-07-10 11:11:05 发布

哎呦、好家伙

最新推荐文章于 2024-07-10 11:11:05 发布

阅读量247

点赞数 1

CC 4.0 BY-SA版权

文章标签： reactjs 前端 react

本文链接：https://blog.csdn.net/HwH66998/article/details/105681106

本文详细介绍了React路由的使用，包括路由组件的基础应用，如何进行嵌套路由以构建复杂的页面结构，以及如何在路由中传递参数，帮助开发者更好地掌握React应用的导航控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由组件

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

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

基本使用：

//首先在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>//用于渲染与路径匹配的第一个 <Route> 或 <Redirect>
           <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>
    		)