当前位置：首页 > news >正文

React 路由5版本的使用详解(基于Class类版本的使用react-router-dom@5)

news 来源：原创 2024/9/29 1:34:36

React-Router-Dom 注意事项

1.整个SPA页面只能有一个路由器 BrowserRouter或者HashRouter

root.render(<React.StrictMode>{/* 只能有且只有一个路由器 */}<BrowserRouter>{/* SPA 单页面 */}<App></App></BrowserRouter></React.StrictMode>
)

2.路由Route 一般都被包裹在Switch组件里

1.route 有两个属性,一个是path 代表路径,一个是component代表组件

       <Switch><Route path="/Login" component={Login}></Route><Route path="/Home" component={Home}></Route><Redirect to="/Login"></Redirect></Switch>

3. UI中的路由跳转，一般用NavLink或者Link,有选中效果一般是NavLink(声明式导航)

1.NavLink和Link 都有 to 代表跳转的属性
2.NavLink 中的activeClassName 设置选中状态的类名

<li><NavLink to="/Home/About" activeClassName="active">关于我们</NavLink></li>
<li><NavLink to="/Home/News" activeClassName="active">新闻列表</NavLink>
</li>

4.Redirect 组件为路由重定向组件

1.属性from 从那个页面来，属性to重定向哪个页面去

5.React-Router-Dom 请求参数的三种模式

1.params 模式

1.路由链接携带参数
<Link to={`/Home/News/Detail/${item.id}/${item.title}/${item.content}`}>{item.id}={item.title}={item.content}
</Link>
2.注册路由(声明接收)
<Route component={Detail} path="/Home/News/Detail/:id/:title/:content"></Route>
3.接收参数
this.props.match.params

2.search参数模式

1.路由链接携带参数<Link to={`/Home/News/Detail?${item.id}&${item.title}&${item.content}`}>{item.id}={item.title}={item.content}</Link>2.注册路由(声明接收)<Route component={Detail} path="/Home/News/Detail"></Route>3.接收参数this.props.location.search参数模式?key1=value1&key2=value2&key3=value3模式安装querystring import qs from "querystring"const getResult= qs.parse(this.props.location.search.slice(1))//解析成一个对象

3.state参数

1.路由链接携带参数<Link to={{pathname: "/Home/News/Detail",state: {id: item.id,title: item.title,content: item.content,},}}>{item.id}={item.title}={item.content}</Link>
2.注册路由(声明接收)<Route component={Detail} path="/Home/News/Detail"></Route>
3.接收参数
this.props.location.state
//备注：刷新也可以保留住参数

######6. React-Router-Dom 编程式导航
1.push 跳转+携带params参数

 props.history.push(`/Home/News/Detail/${id}/${title}`);

2.push跳转+携带search参数

props.history.push(`/Home/News/Detail?id=${id}&title=${title}`);

3.push跳转+携带state参数

props.history.push(`/Home/News/Detail`, { id, title });

4.前进

this.props.history.goForward();

5.回退

this.props.history.goForward();

6.前进或者回退

this.props.history.go(-2); //回退到前2条的路由

在一般组件中使用编程式路由导航（非路由组件）

import {withRouter} from 'react-router-dom
class Header extends Component {// withRouter(Header)后，就可以在一般组件内部使用 this.props.history //...
}
export default withRouter(Header)