React-路由配置
程序员文章站
2022-03-23 11:09:06
React路由根据不同的路径显示不同的组件内容,使用react-router-dom库安装:npm install react-router-dom下面例子中,通过export暴露App类,返回index.js中使用渲染,下面代码中,需要注意的是,Router的div内容是正常显示的,其中使用的exact为精确匹配import React from 'react'import { BrowserRouter as Router, Link, Route } from 'react-router-...
React路由
根据不同的路径显示不同的组件内容,使用react-router-dom库
安装:npm install react-router-dom
下面例子中,通过export暴露App类,返回index.js中使用渲染,下面代码中,需要注意的是,Router的div内容是正常显示的,其中使用的exact为精确匹配
import React from 'react'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'
function Home() {
return (
<div>
<h1>首页</h1>
</div>
)
}
function Me() {
return (
<div>
<h1>个人中心</h1>
</div>
)
}
function Product() {
return (
<div>
<h1>产品中心</h1>
</div>
)
}
export default class App extends React.Component {
render () {
return (
<div>
<p>这是普通内容</p>
<Router>
<div>
<Link to='/'>Home</Link>
<br />
<Link to='/product'>Product</Link>
<br />
<Link to='/me'>个人中心</Link>
</div>
<Route path="/" exact component={Home}></Route>
<Route path="/product" component={Product}></Route>
<Route path="/me" component={Me}></Route>
</Router>
</div>
)
}
}
可以添加在Router中添加bansename属性,意思是给每一个路由添加一个前缀路由
import React from 'react'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'
function Home() {
return (
<div>
<h1>首页</h1>
</div>
)
}
function Me() {
return (
<div>
<h1>个人中心</h1>
</div>
)
}
function Product() {
return (
<div>
<h1>产品中心</h1>
</div>
)
}
export default class App extends React.Component {
render () {
return (
<div>
<p>这是普通内容</p>
<Router basename="admin">
<div>
<Link to='/'>Home</Link>
<br />
<Link to='/product'>Product</Link>
<br />
<Link to='/me'>个人中心</Link>
</div>
<Route path="/" exact component={Home}></Route>
<Route path="/product" component={Product}></Route>
<Route path="/me" component={Me}></Route>
</Router>
</div>
)
}
}
Link标签中的to属性可以传递的不仅仅是字符串,还可以是变量,下面例子,修改个人中心的路由
import React from 'react'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'
function Home() {
return (
<div>
<h1>首页</h1>
</div>
)
}
function Me(props) {
console.log(props);
return (
<div>
<h1>个人中心</h1>
</div>
)
}
function Product() {
return (
<div>
<h1>产品中心</h1>
</div>
)
}
export default class App extends React.Component {
render () {
const meObj = {
pathname: 'me',
search: '?username=admin',
hash: '#abc',
state: {
msg: 'hello'
}
}
return (
<div>
<p>这是普通内容</p>
<Router basename="admin">
<div>
<Link to='/'>Home</Link>
<br />
<Link to='/product'>Product</Link>
<br />
<Link to={meObj}>个人中心</Link>
</div>
<Route path="/" exact component={Home}></Route>
<Route path="/product" component={Product}></Route>
<Route path="/me" component={Me}></Route>
</Router>
</div>
)
}
}
在Link标签中使用replace,作用是替换当前的路由,也就是如果点击返回上一步,返回的是被替换掉的路由的上一个路由
import React from 'react'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'
function Home() {
return (
<div>
<h1>首页</h1>
</div>
)
}
function Me(props) {
console.log(props);
return (
<div>
<h1>个人中心</h1>
</div>
)
}
function Product() {
return (
<div>
<h1>产品中心</h1>
</div>
)
}
export default class App extends React.Component {
render () {
const meObj = {
pathname: 'me',
search: '?username=admin',
hash: '#abc',
state: {
msg: 'hello'
}
}
return (
<div>
<p>这是普通内容</p>
<Router basename="admin">
<div>
<Link to='/'>Home</Link>
<br />
<Link to='/product'>Product</Link>
<br />
<Link replace to={meObj}>个人中心</Link>
</div>
<Route path="/" exact component={Home}></Route>
<Route path="/product" component={Product}></Route>
<Route path="/me" component={Me}></Route>
</Router>
</div>
)
}
}
动态路由,通过props.match.params.xxx获取参数
import React from 'react'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'
function Home() {
return (
<div>
<h1>首页</h1>
</div>
)
}
function Me(props) {
console.log(props);
return (
<div>
<h1>个人中心</h1>
</div>
)
}
function Product() {
return (
<div>
<h1>产品中心</h1>
</div>
)
}
function News(props) {
console.log(props);
return (
<div>
<h1>新闻中心,url中的id={props.match.params.id}</h1>
</div>
)
}
export default class App extends React.Component {
render () {
const meObj = {
pathname: 'me',
search: '?username=admin',
hash: '#abc',
state: {
msg: 'hello'
}
}
return (
<div>
<p>这是普通内容</p>
<Router basename="admin">
<div>
<Link to='/'>Home</Link>
<br />
<Link to='/product'>Product</Link>
<br />
<Link replace to={meObj}>个人中心</Link>
<br />
<Link to="/news123">新闻</Link>
</div>
<Route path="/" exact component={Home}></Route>
<Route path="/product" component={Product}></Route>
<Route path="/me" component={Me}></Route>
<Route path="/news:id" component={News}></Route>
</Router>
</div>
)
}
}
本文地址:https://blog.csdn.net/weixin_43760969/article/details/111087141
上一篇: python字典遍历数据的具体做法
下一篇: 李侍尧犯下死罪,乾隆为何对其网开一面?