react 路由优先级及 switch作用

最新推荐文章于 2025-03-20 15:55:19 发布

我就是李白

最新推荐文章于 2025-03-20 15:55:19 发布

阅读量976

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_44763349/article/details/123047718

版权

本文详细探讨了React路由的优先级，指出children、component和render的匹配顺序为children > component > render。同时，解释了Switch组件的作用，它会独占路由，仅渲染第一个匹配的route或redirect，若无匹配项，可通过404路由进行处理。

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

此文主要介绍下react路由的优先级和switch的作用。

export default function App(props) {
  return (
    <div className="app">
      <Router>
        <Link to="/">首页</Link>
        <Link to="/user">用户中心</Link>
        <Link to="/login">登录</Link>
        <Link to="/product/123">商品</Link>

        <Switch>
          <Route
            exact
            path="/"
            //children={children}
            component={HomePage}
            //render={render}
          >
            {/* children 0000 */}
          </Route>
          <Route path="/user" component={UserPage} />
          <Route path="/login" component={LoginPage} />
          {/* <Route path="/product/:id" component={Product} /> */}
          <Route path="/product/:id" render={() => <Product />} />

          <Route component={_404Page} />
        </Switch>
      </Router>
    </div>
  );
}

function children(props) {
  return <div>children</div>;
}

function render(props) {
  console.log("render props", props); //sy-log
  return <div>render</div>;
}

代码如上可以验证，先去掉switch,然后匹配children,可以发现，children在每个路由变化之后都匹配到了，证明children不管是否匹配都会渲染。
注释掉children,解开component和render，可以发现component优先匹配，并且只有匹配到了才会渲染，由此可见，三者优先级为 children > component > render。
现在把switch放开，发现children只有在匹配之后才会渲染。说明switch是独占路由：返回第一个匹配的route或者redirect。如果没有找到，则可以设置一个404路由。