测开技能--Web开发 React 学习（十五）
import React from "react"
import Project from "./pages/project"
import Inteface from './pages/interface'
// import {
// BrowserRouter as Router,
// Switch,
// Route,
// Link
// } from "react-router-dom";
import {
HashRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
function App(){
return (
<div className="app">
<Router>
<ul>
<li>
<Link to="/project">project</Link></li>
<li> <Link to="/interface">interface</Link></li>
</ul>
<Route path="/project" component={Project}></Route>
<Route path="/interface" component={Inteface}></Route>
</Router>
</div>
)
} export default App然后我们启动去点击下，点击不同的link 跳转到不同的页面。
这些写好之后呢，我们可以抽离出来一个组件，方便后续的使用。
在src创建一个comnets目录，创建nav 创建index.jsx。然后去编写
import React from "react"
import {
HashRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Project from "../../pages/project"
import Inteface from '../../pages/interface'
export default class Nav extends React.Component{
render(){
return(
<div className="app">
<Router>
<ul>
<li>
<Link to="/project">project</Link></li>
<li> <Link to="/interface">interface</Link></li>
</ul>
<Route path="/project" component={Project}></Route>
<Route path="/interface" component={Inteface}></Route>
</Router>
</div>
)
}
}最后在 app.js改造即可
import Nav from "./compoents/nav/index"
function App(){
return (
<Nav/>
)
} export default App最后访问，还是可以正常操作
有时候，我们会发现一些路径下面还会有子路径，但是呢，访问，包括上面的就直接展示了，那么要想只展示对应的，我们需要增加 这样写即可，精准匹配的url
<Route exact path="/interface/name" component={Inteface}></Route>增加exact， 会更加精准。
我们可能出现404，那么我们来封装个404页面
import React from "react"
class Nound extends React.Component{
render(){
return(
<div>
404
</div>
)
}
}export default Nound接着，我们去引入
import React from "react"
import {
HashRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Project from "../../pages/project"
import Inteface from '../../pages/interface'
import Nound from '../../pages/notfound'
export default class Nav extends React.Component{
render(){
return(
<div className="app"> <Router>
<ul>
<li>
<Link to="/project">project</Link></li>
<li> <Link to="/interface">interface</Link></li>
</ul>
<Route exact path="/project" component={Project}></Route>
<Route strict exact path="/interface" component={Inteface}></Route>
<Route exact path="/interface/name" component={Inteface}></Route>
<Route component={Nound}></Route>
</Router>
</div>
)
}
}
但是我们访问每个页面都会出现404，要如何解决呢，在后续的课程中，我们还会讲解。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-07-31，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
