react-7 react-router-dom 的简单使用（2）

朴灿烈づ我的快乐病毒、 2022-03-18 05:27 180阅读 0赞

之前，我们尝试了类似 tab选项卡功能的路由学习；

现在我们来看下基本的各个页面间的路由的实现；

下面实现一个基础的四个页面的项目的路由的处理：

我们默认进入首页 home， 也就是访问根目录的时候进入home 页面；

当我们在地址栏中输入 /Intro 的时候，我们进入介绍页面；

当我们在地址栏中输入/Func 的时候，我们进入功能页面；

当我们在地址栏中输入/Show 的时候，我们进入展示页面；

第一步： 使用 create-react-app 创建一个测试的项目，我在 f 盘下面创建了react-app-delete 目录，然后再这个

react-app-delete 目录下使用命令 create-react-app my-app-do  创建my-app-do 这个测试项目；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70][]

我们按照上面的提示，先使用命令 cd my-app-do   进入我们创建的 my-app-do 项目；

再使用命令 npm start 启动这个项目，我们 可以看到浏览器中正常启动即可，项目没有问题；

第二步： 使用 create-react-app 命令创建的项目本身有默认的显示的页面，所以我们需要修改下；

我们先打开项目my-app-do,生成的默认的项目的首页是通过 src/index.js 文件渲染的 App.js;

也就是说这个默认生成的首页是 src/App.js 文件，这个文件通过 src/index.js 挂载到 public

下的Index.html中；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70 1][]

我们舍弃这个默认生成的页面 src/App.js

然后我们首先在 src 目录下创建 Pages 目录，用来放置几个新加的页面；

我们在Pages下创建一个首页的 home 组件，也就是首页的页面，

创建一个简介组件 intro；

再创建一个功能组件 func ,

最后创建一个展示组件 show；

几个需要跳转的页面写好了，再增加一个路由的组件，用来实现项目的路由，在src目录下

创建 Router目录，增加 Router目录中创建 router.js文件；

上面目录和文件创建完成之后的项目目录结构如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70 2][]

上面新增文件和代码如下：

1. func.js

import React from 'react';
    import './func.css';
    
    export default class Func extends React.Component {
        render(){
            return(
                <div>我是功能页面</div>
            )
        }
    }

2.home.js

import React from 'react';
    import './home.css'
    
    
    export default class Home extends React.Component {
        render(){
            return(
                <div>我是首页文件</div>
            )
        }
    }

3.intro.js

import React from 'react';
    import './intro.css';
    
    export default class Intro extends React.Component {
        render(){
            return(
                <div>我是简介页面</div>
            )
        }
    }

4.show.js

import React from 'react';
    import './show.css';
    
    export default class Show extends React.Component {
        render(){
            return(
                <div>我是展示的页面</div>
            )
        }
    }

其余的样式文件都是空，func.css   home.css   intro.css  show.css  ,我在每个组件的页面中只是添加了一句话，

所以没有设置任何的样式，你可以自己设置相应的样式即可；

5.router.js

import React from 'react';
    import {BrowserRouter as Routerme, Route, Link, Switch} from "react-router-dom";
    import Home from '../Pages/Home/home';
    import Intro from '../Pages/Intro/intro';
    import Func from '../Pages/Func/func';
    import Show from '../Pages/Show/show';
    
    export default class Router extends React.Component {
        render(){
            return(
                <Routerme>
                    <Switch>
                        <Route exact={true} path="/" component={Home}></Route>
                        <Route path="/Intro" component={Intro}></Route>
                        <Route path="/Func" component={Func}></Route>
                        <Route path="/Show" component={Show}></Route>
                    </Switch>
                </Routerme>
            )
        }
    }

上面就是我们需要增加的文件；

除了上面增加的文件，我们还需要修改一下 src/index.js 文件；

默认生成的项目默认渲染了 App 这个组件作为显示的页面，我们现在把我们写好的路由组件 Router 作为渲染的对象；

也就是 React.DOM  的对象改为 <Router/.>组件就可以了；

src/index.js

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import Router from './Router/router';
    import * as serviceWorker from './serviceWorker';
    
    // ReactDOM.render(<App />, document.getElementById('root'));   原先的代码
    ReactDOM.render(<Router/>,document.getElementById('root'));     
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: http://bit.ly/CRA-PWA
    serviceWorker.unregister();

做完上面的工作；

我们在浏览器中可以看到地址栏是：[http://localhost:3000/][http_localhost_3000]   ，显示的内容是：我是首页文件

我们修改地址栏：[http://localhost:3000/intro][http_localhost_3000_intro]  ，显示的内容是：我是简介页面

其余的页面也是同理；

上面的路由实现了默认显示首页，然后我们修改路由地址可以改变显示的页面；

下一篇我们尝试默认显示首页，然后在首页中点击跳转相应的页面的处理；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70]: /images/20220318/f96cd6187e464d2a902e6c55063e542c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70 1]: /images/20220318/007a1b2af7154882baae264358f12a78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70 2]: /images/20220318/90766e02e023456e8752eb01ac168a73.png
[http_localhost_3000]: http://localhost:3000/
[http_localhost_3000_intro]: http://localhost:3000/intro