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

程序员文章站 2022-07-11 08:27:39

...

（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/

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