zoukankan      html  css  js  c++  java
  • 使用react-router-dom 来搭建react路由

    import React, { Component } from 'react';
    import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch,
    Redirect
    } from 'react-router-dom';
    import About from './router-about/About';
    import Home from './router-home/Home';
    import List from './router-list/List';
    import Main from './router-main/Main';
    import NotFound from './router-notFound/NotFound';

    export default class Routes extends Component {
    constructor(props){
    super(props);
    this.state = {

    };
    }

    render(){
    return (
    <Router>
    <div>
    <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/about">About</Link></li>
    <li><Link to="/list">List</Link></li>
    <li><Link to="/main">Main</Link></li>
    </ul>
    <hr/>
    <Switch>
    <Route exact path="/" component={Home}/>
    <Redirect from='/home' to='/'/>
    {/*当我们在地址栏中直接输入home是的跳转 */}
    <Route path="/about" component={About}/>
    <Route path="/list" component={List}/>
    <Route path="/main" component={Main}/>
    <Route component={NotFound}/>
    {/*当我们在地址栏中输入的之不存再时跳转*/}
    </Switch>
    </div>
    </Router>
    )
    }
    }
  • 相关阅读:
    转:孟岩老大的忠告谈谈如何写技术文章
    base html / div / css / HTML / DIV / CSS
    js Connection
    db oracle config
    UNIX + OS IBM AIX 5L HACMP
    JAVA EE JSP collection
    地址和指针的概念
    全局变量
    地址和指针的概念
    内存数组的存储
  • 原文地址:https://www.cnblogs.com/boonook/p/9598227.html
Copyright © 2011-2022 走看看