react-router

来源：互联网发布：淘宝评论在哪里写编辑：程序博客网时间：2024/06/05 16:18

react中如何从一个页面跳转到另一个页面，
这时我们要用到路由，我这里不完整，后续补充完整，我先写一部分在这里，用于记录。读者可以绕道其行。

import "../css/reset.css";import "../css/common.css";import React,{ Component } from "react";import { render } from "react-dom";import {    Link} from "react-router-dom";export default class Header extends Component{    render(){        return(            <div className="header_box">                <div className="header center">                    走秀网                </div>                <Link to="/classify">                    <div className="header_clip center">                        clip to classify页面                    </div>                </Link>            </div>        )    }}

主要是这部分代码

<Link to="/classify">    <div className="header_clip center">        clip to classify页面    </div></Link>

主页面的代码是这样的

//index.jsimport "../css/reset.css";import "../css/common.css";import React,{ Component } from "react";import { render } from "react-dom";import {    BrowserRouter as Router,    Route,    NavLink,    Link}from "react-router-dom";import Header from "../Components/Header";import Classify from "../Components/Classify";import Club from "../Components/Club";import Shop from "../Components/Shop";import Owner from "../Components/owner";class Main extends Component{    render(){        return (            <Router>                <div className="container">                    <div className="content">                        <Route exact path = "/" component={Header} />                        <Route path = "/classify" component={Classify} />                        <Route path = "/club" component={Club} />                        <Route path = "/shop" component={Shop} />                        <Route path = "/owner" component={Owner} />                    </div>                    <div className="footer center">                        <ul className="footer_list">                            <li className="lis center"><NavLink exact to="/" activeClassName="selected center">首页</NavLink></li>                            <li className="lis center"><NavLink to="/classify" activeClassName="selected center">分类</NavLink></li>                            <li className="lis center"><NavLink to="/club" activeClassName="selected center">Y-Club</NavLink></li>                            <li className="lis center"><NavLink to="/shop" activeClassName="selected center">购物车</NavLink></li>                            <li className="lis center"><NavLink to="/owner" activeClassName="selected center">我的</NavLink></li>                        </ul>                    </div>                </div>            </Router>        )    }}render(    <Main />,    document.getElementById("root"));

暂时不解释，有空会补充的

阅读全文

0 0