react-router

最新推荐文章于 2024-07-13 21:47:20 发布

天下1281

最新推荐文章于 2024-07-13 21:47:20 发布

阅读量218

点赞数

分类专栏： react-router 文章标签： react-native

本文链接：https://blog.csdn.net/boysky0015/article/details/72872119

版权

react-router 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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.js
import "../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")
);