react+router路由

1.首先创建react脚手架
2.安装react-router-dom插件

npm install --save react-router-dom

3.创建react路由结构如下图：

index.js内容

import React from 'react';
import ReactDOM from 'react-dom';
import { Route,BrowserRouter,Switch  } from 'react-router-dom'
import './index.css';
import Home from './components/Home';
import Hello from './components/Hello';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<BrowserRouter>
    <Switch>app
        <Route exact path="/" component={Home}></Route>
        <Route exact path="/hello/:id" component={Hello}></Route>
    </Switch>
  </BrowserRouter>, document.getElementById('root'));
registerServiceWorker();

在src文件夹下创建components文件夹并创建Hello.js和Home.js
Hello.js内容

import React,{ Component } from "react";
import { Link } from "react-router-dom";
export default class Hello extends Component{
    render(){

        return(
            <div>
                Hello world!!!
                <ul>
                    <li><Link to='/'>Home</Link></li>
                  </ul>
            </div>
        )
    }
}

Home.js内容

import React,{ Component } from "react";
import { Link } from "react-router-dom";
export default class Home extends Component{
    render(){

        return(
            <div>
                Home
                <ul>
                    <li><Link to='/hello/1'>hello</Link></li>
                  </ul>
                  
            </div>
        )
    }
}

4.执行脚本
在命令行中进入react_app文件目录执行

npm start

浏览器端如图所示：

以上就是react基础的路由创建