React中的路由配置。 react-router-dom

小灰灰 2023-05-29 03:35 5阅读 0赞

（1）安装：

> npm install react-router-dom --save         // 安装路由

（2）找到根组件App.js文件：

// 引入路由
    import { BrowserRouter as Router,Route,Link } from 'react-router-dom'

（3）创建组件：  Home.js  、News.js  、Product.js组件。

Home.js组件：   \[ News.js 和 Product.js组件  举一反三即可 \]

import React,{Component} from 'react';
    
    class Home extends Component{
        constructor(props){
            super(props)
            this.state = {}
        }
        render(){
            return(
                <div>我是Home组件</div>
            )
        }
    }
    export default Home;

（4）在App.js中引入组件，并且配置相关的路由。

import React,{ Component } from 'react';
    import { BrowserRouter as Router,Route,Link } from 'react-router-dom'
    import Home from './components/Home'
    import News from './components/News'
    import Product from './components/Product'
    
    class App extends Component{
      constructor(props){
        super(props)
        this.state = {}
      }
      render(){
        return(
          <Router>
            <div>
             
              <ul>
                <li><Link to="/">Home页面</Link></li>
                <li><Link to="/news">News页面</Link></li>
                <li><Link to="/product">Product页面</Link></li>
              </ul>
    
              {/* 路由配置    exact  表示严格匹配。 */}
              <Route exact path="/" component={Home}></Route>
              <Route path="/news" component={News}></Route>
              <Route path="/product" component={Product}></Route>
    
            </div>
          </Router>
        )
      }
    }
    
    export default App;

这样简单的路由就配置好了。

(5)启动项目运行试试：[http://localhost:3000/][http_localhost_3000]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

\-------至此，我们的路由基本上就搭建好了。可以继续下面的工作啦。

但是，

如果路由很多的话，我们就得将路由模块的文件从App.js中抽离出去，即：路由模块化。相关配置，[详见博客][Link 1]。

[http_localhost_3000]: http://localhost:3001/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191103133409955.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[Link 1]: https://blog.csdn.net/Miss_liangrm/article/details/102882327