页面中点击路由实现切换

Posted 2021-08-26 老张在线敲代码

如何再项目中配置路由，看之前这个文章

页面中点击路由实现切换需要安装react-router-dom

在app.js中引入相应页面及依赖包

import React, { Component } from "react";
import { withRouter, NavLink, Switch, Redirect, Route } from "react-router-dom";
import Home from "./views/home/index.jsx";
import Router from "./views/router/index.jsx";
class App extends Component {
  render() {
    return (
      <Switch>
      {/*exact精准匹配  会给当前页面标签附加一个active属性，方便页面切换高亮效果实现*/}
        <Route exact path="/" component={Home} />
        <Route path="/router" component={Router} />
        <Redirect to="/" />
        {/* redirect输入一个不存在的地址时候返回设置的默认页 */}
      </Switch>
    );
  }
}
export default App;

import { withRouter, NavLink, Switch, Redirect, Route } from "react-router-dom";

简单的实现页面切换
router.index页面

 import React, { Component } from "react";
import { withRouter, NavLink, Switch, Redirect, Route } from "react-router-dom";
class index extends Component {
  render() {
    return (
      <div>
        <NavLink to="/">home</NavLink>
        <br />
        <NavLink to="/router">router</NavLink>
        路由页面
      </div>
    );
  }
}

export default index;

home页面

import React, { Component } from "react";
import { withRouter, NavLink, Switch, Redirect, Route } from "react-router-dom";
class Home extends Component {
  render() {
    return (
      <div>
        <NavLink to="/">home</NavLink>
        404页面
        <br />
        <NavLink to="/router">router</NavLink>
      </div>
    );
  }
}

export default Home;

完成以上步骤就可以简单的实现页面中点击切换路由页面