react路由
快速开始
首先安装create-react-app
npm i react-router-dom -S
在app.js中引入
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
下面是app.js里的内容。
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
// import Heads from './head/heads.js'
// import Conts from './cont/conts.js'
// import Foots from './footer/foots.js'
function Index() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}
class App extends React.Component {
render(){
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about/">About</Link>
</li>
<li>
<Link to="/users/">Users</Link>
</li>
</ul>
</nav>
<Route path="/" exact component={Index} />
<Route path="/about/" component={About} />
<Route path="/users/" component={Users} />
</div>
</Router>
);
}
}
export default App;
就会实现一个简单的路由。
具体文档看
https://reacttraining.com/react-router/web/example/custom-link