6.0版本之前路由設(shè)置：
// App.js
import React, { Component } from 'react';
// 引入路由
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
// 路由頁(yè)面
import Home from './components/Home';
import Login from './components/Login';
class App extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<Router>
<ul className="topBar">
<li><Link to="/">Home</Link></li>
<li><Link to="/login">Login</Link></li>
</ul>
<Route exact path="/" component={Home}/>
<Route path="/login" component={Login}/>
</Router>
);
}
}
export default App;
6.0網(wǎng)上新版路由配置：
// App.js
import React, { Component } from 'react';
// 引入路由
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
// 路由頁(yè)面
import Home from './components/Home'
import Login from './components/Login'
class App extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<Router>
<ul className="topBar">
<li><Link to="/">Home</Link></li>
<li><Link to="/login">Login</Link></li>
</ul>
<Routes>
<Route exact path="/" element={<Home/>}/>
<Route path="/login" element={<Login/>}/>
</Routes>
</Router>
);
}
}
export default App;
