©2020-2024 ioDraw All rights reserved,
Privacy Policy
react路由配置 1 安装react-router-dom 5.2.0 或者5.2.1 npm i react-router-dom --save-dev
2 在项目中创建router.js文件 import { BrowserRouter, Route } from 'react-router-dom';
class Router extends React.Component{ render() { return ( <BrowserRouter>
<Route exact path="/路径" component={路由组件}></Route> <Route strict exact
path="/路径/:自定义属性名" component={路由组件}></Route> // 动态路由匹配 /路径/123 /路径/name
</BrowserRouter> ) } } exact 为严格模式 strict 精确匹配 export default Router 3
在index.js文件中 引入 Router import Router from './Router' <React.StrictMode> <Router
/> </React.StrictMode> 注意： 在react-router-dom中有Link标签 相当于html里边a标签 或者
vue里边的router-link 格式 import {Link} from 'react-router-dom' <Link
to="/path路径">1111</Link> 路由组件传值 1 使用斜杠传值 格式： localhost:3000/topic/:id
path='/topic/:id' 获取参数id: this.props.match.params.id 2 使用问号传值
localhost:3000/topic path='/topic' /topic?id=123 获取参数
this.props.location.search 路由重定向 Redirect组件标签 本来应该去path路径 直接跳转其他的path路径 格式：
<Redirect from="来的路径" to="最终跳转显示的路径"/> 嵌套子路由 在进行路由匹配的时候 输入的一个路由地址为/app 渲染app组件
/app/a 渲染a组件 但是 我们想让 同时显示app组件 格式： <Route path="/app" render={()=> <App> <Route
path="/app/a" component={A}/> </App> }> 想要在/app/a里边能够正常的显示出来a组件 我们需要在app组件里边使用
{this.props.children}来渲染嵌套子组件的内容 react中将字符串的html转化为dom结构的html
使用dangerouslySetInnerHTML={{__html:state数据}} 直接作为元素的标签属性来使用