React Router 的两种方式

最新推荐文章于 2025-06-10 11:00:18 发布

原创最新推荐文章于 2025-06-10 11:00:18 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了React Router的两种使用方式：混合标签与抽离router控制。通过实例展示了如何利用HashRouter进行路由配置，包括主路由与子路由的设置，以及在不同场景下使用exact属性的重要性。

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

组建router的方式分为两种：

1: 混合标签，就是和其他标签嵌套混合着来；

2：抽离router 单独控制；

先说第一种：

 <HashRouter>
                <div>
                    <ul>
                        <li>
                            <Link to="/">main</Link>
                        </li>
                        <li>
                            <Link to="/about">about</Link>
                        </li>
                        <li>
                            <Link to="/topic">topic</Link>
                        </li>
                    </ul>

                    <Switch>
                    <Route path="/"  exact component={Main} />
                    <Route path="/about" component={About} />
                    <Route path="/topic" component={Topic} />

                    </Switch>
                </div>
            </HashRouter>

其他子组件里也可以嵌套route；

需要注意根节点需要 exact精准匹配正则；其次节点如果需要也需要精准匹配；

2，抽离

<HashRouter>
            <Home>
                <Switch>
                    <Route path="/main"  render={()=><Main>
                        <Route  path="/main/a" component={About} />
                    </Main>} />
                <Route path="/about"  component={About} />
                <Route path="/topic" component={Topic} />
                </Switch>
            </Home>
        </HashRouter>

所有的 route都写在一个页面不混着来，这样方便我们做分配；子组件里用 {this.props.children} 来渲染route

需要注意的是最好不要用 “/” 根节点，这样就不用精准匹配了exact （否则子路由进不来），如果真的需要精准匹配路由的末端再去精准匹配好了；