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基础的路由创建