react配置路由之第一次测试

首先，打开当前的所在项目，运行：

npm install react-router-dom --save

然后引用import { BrowserRouter as Router, Route, Link } from "react-router-dom";

代码如下：

import React from 'react';

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import logo from './assets/images/logo.jpg';

  import './assets/css/index.css';

//引入Home组件

 import Home from './components/Home'

 import News from './components/News'

// import Todolist from './components/Todolist'

 

import Axios from './components/Axios';

import Product from './components/Product'

 

function App() {

  return (

    <Router>

      <div>

        <header className="title">

 

        <Link to="/">首页</Link>

            <br/>

            <Link to="/News">新闻</Link>

            <br/>

            <Link to="/Product">产品</Link>

            <br/>

            <hr/>

 

        </header>

           

            

        <Route exact path="/" component={Home} />

        <Route path="/News" component={News} />

        <Route path="/Product" component={Product} />

      </div>

    </Router>

      

  );

}

 

export default App;

效果如下所示：

实现最简单的路由的跳转