世界上最伟大的投资就是投资自己的教育
https://reacttraining.com/react-router/web/api/Link
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import About from './components/About';
import Home from './components/Home';
import NoMatch from './components/Error';
import queryString from 'query-string';
import {
BrowserRouter as Router,
Route,
NavLink,
Link,
Switch
} from 'react-router-dom'
// import Link from 'react-router-dom/Link';
const User = (props) => {
// const params = new URLSearchParams(props.location.search);
// console.log(params.get("name"));
// console.log(params.get("a"));
// const values = queryString.parse(props.location.search);
// console.log(values.name);
// console.log(values.a);
// console.log(props.location.state.fromDashboard);
console.log(props);
return (
<div>User { props.match.params.id }</div>
)
}
class App extends Component {
render() {
return (
<Router>
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<div className="App-intro">
<ul>
<li>
<NavLink
exact
to="/"
activeStyle={{
color: 'green'
}}>
Home
</NavLink>
</li>
<li>
<NavLink
exact
to="/about"
activeStyle={{
color: 'green'
}}>
About
</NavLink>
</li>
<li>
<NavLink
to="/error"
activeStyle={{
color: 'green'
}}>
Error
</NavLink>
</li>
<li>
<NavLink
to="/users/rails365"
activeStyle={{
color: 'green'
}}>
Rails365
</NavLink>
</li>
<li>
<Link to={{
pathname: '/users/rails365',
search: '?a=b',
hash: '#the-hash',
state: { fromDashboard: true }
}}>
pro
</Link>
</li>
</ul>
<Switch>
<Route exact path="/" component={ Home } />
<Route strict exact path="/about" component={ About } />
<Route path="/about/new" component={ About } />
<Route path="/home" component={ Home } />
<Route path="/new_home" render={ (props) => <Home { ...props } name={ "rails365" } /> } />
<Route path="/users/:id" component={ User } />
<Route component={ NoMatch } />
</Switch>
</div>
</div>
</Router>
);
}
}
export default App;
06:341Free轻松学 React-Router 4 路由免费视频教程 #01 介绍
04:112Free轻松学 React-Router 4 路由免费视频教程 #02 BrowserRouter 与 HashRouter
03:223Free轻松学 React-Router 4 路由免费视频教程 #03 Link
03:384Free轻松学 React-Router 4 路由免费视频教程 #04 exact
01:215Free轻松学 React-Router 4 路由免费视频教程 #05 strict
02:026Free轻松学 React-Router 4 路由免费视频教程 #06 404 page
01:397Free轻松学 React-Router 4 路由免费视频教程 #07 Switch
03:088Free轻松学 React-Router 4 路由免费视频教程 #08 render func
02:359Free轻松学 React-Router 4 路由免费视频教程 #09 NavLink
03:0110Free轻松学 React-Router 4 路由免费视频教程 #10 URL Parameters
05:0911Free轻松学 React-Router 4 路由免费视频教程 #11 query string
03:45Free轻松学 React-Router 4 路由免费视频教程 #12 Pass props to Link component
04:4113Free轻松学 React-Router 4 路由免费视频教程 #13 redirect
04:5614Free轻松学 React-Router 4 路由免费视频教程 #14 history push
03:4815Free轻松学 React-Router 4 路由免费视频教程 #15 withRouter
05:4616Free轻松学 React-Router 4 路由免费视频教程 #16 Prompt
09:5917Free轻松学 React-Router 4 路由免费视频教程 #17 Custom Link 和 Route children props
04:0118Free轻松学 React-Router 4 路由免费视频教程 #18 配置式路由
15:2919Free轻松学 React-Router 4 路由免费视频教程 #19 实现代码分离(完结)
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站:https://space.bilibili.com/31152817
知乎:https://www.zhihu.com/people/rails365
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | 创业者社区 | Rails365 Gitlab | Qiuzhi99 Gitlab | Railstart 创业项目 | 知乎 | b 站 | 搜索
粤公网安备 44152102000088号
| 粤ICP备19038915号