React开发CMS总结（路由管理）

最新推荐文章于 2025-02-21 19:04:15 发布

一杯清泉

最新推荐文章于 2025-02-21 19:04:15 发布

阅读量336

点赞数

分类专栏： react 文章标签：路由 react

本文链接：https://blog.youkuaiyun.com/yoonerloop/article/details/115836982

版权

react 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了React应用中的路由配置方法，包括基本的路由设置、嵌套路由的实现方式、默认404页面的处理以及如何使用Switch组件进行精确的路由匹配。

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

页面路由结构图：

1、引入router

yarn add react-router-dom

2、入口文件index

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

3、路由router

export default class IRouter extends React.Component {

    render() {
        return (
            <HashRouter>
                <App>
                    {/**路由嵌套**/}
                    <Route path={'/admin'} render={() => (
                        <Admin>
                            <Route path={'/admin/ui/buttons'} component={Buttons}/>
                            <Route component={NotFind404}/>
                        </Admin>
                    )}/>
                    <Route path={'/login'} component={Login}/>
                </App>
            </HashRouter>
        );
    }
}

如下图：404 Not Find页面是admin切套的路由，点击左侧菜单，匹配Admin中的router，内容变化，菜单栏不变；而Login路由切换时候整个页面都变了，是个独立的页面。

同级路由：HashRouter中嵌套一个虚拟的App-> {props.children}包裹多个Route

     <HashRouter>
         <App>
             <Route path={'/admin'} component={Admin}/>
             <Route path={'/login'} component={Login}/>
         </App>
     </HashRouter>

不同级别路由：HashRouter直接包裹Route，结构

     <HashRouter>
         <Header></Header>
         <Route path={'/admin'} component={Admin}/>
         <Route path={'/login'} component={Login}/>
     </HashRouter>

App：

const App = (props) => {
    return (
        <div>
            {props.children}
        </div>
    );
}

export default App;

这样App作为不同页面的容器，加载children的路由页面。

4、嵌套路由加载

export default class Admin extends React.Component {
    render() {
        return (
            <Row className={'container'}>
                <Col span={4} className={'nav-left'}>
                    <NavLeft/>
                </Col>
                <Col span={20} className={'main'}>
                    <Header></Header>
                    <Row className={'content'}>
                        {this.props.children}
                    </Row>
                    <Footer></Footer>
                </Col>
            </Row>
        );
    }
}

这块的{this.props.children}指的是Admin的子组件，即：{this.props.children}，在当前指的是匹配到的Buttons或者NotFind404等组件。

<Admin>
     <Route path={'/admin/ui/buttons'} component={Buttons}/>
     <Route component={NotFind404}/>
 </Admin>

5、默认404页面

如上<Route component={NotFind404}/>，不写path，则匹配到就是404组件的显示页面。

6、路由匹配

路由的匹配默认从上到下依次匹配，可能会匹配到多个，引入Switch组件包裹route，则表示从上到下匹配一个成功了，就结束匹配，为了能够精确匹配需要添加exact，否则可能会出现匹配到的不准确，例如：/a/b，/a两个路由，如果匹配/a：

    <Switch>
        <Route exact path="/a/b" component={B}/>
        <Route path="/a" component={A}/>
    </Switch>

不添加exact则就出现匹配到/a/b的情况。路由详情参考：https://blog.youkuaiyun.com/yoonerloop/article/details/113528953