zoukankan      html  css  js  c++  java
  • [React] React Router: Nested Routes

    Since react-router routes are components, creating nested routes is as simple as making one route a child of another in JSX. 

    Make the nested component:

    class App extends React.Component {
        render(){
            return(
                <Router history={hashHistory}>
                    <Route path="/" component={Home}>
                        <Route path="about" component={About}>
                            <Route path="contact" component={Contact}></Route>
                        </Route>
                    </Route>
                </Router>
            );
        }
    }

    Change the path:

    const Links = () =>
        <nav >
            <Link activeStyle={{color: 'green'}} to="/">Home</Link>
            <Link activeStyle={{color: 'green'}} to="/about">About</Link>
            <Link activeClassName="active" to="/about/contact">Contact</Link>
        </nav>;

    Pass the props.children to the nested component: 

    const Home = (props) => <div><h1>Home</h1><Links></Links>{props.children}</div>;
    const About = (props) => <div><h1>About</h1>{props.children}</div>;
    const Contact = () => <div><h1>Contact</h1></div>;

    ----------------

    import React from 'react';
    import {hashHistory, Route, Router, Link} from 'react-router';
    
    // About is the child of home, to display the about, we need to access
    // props.children
    const Home = (props) => <div><h1>Home</h1><Links></Links>{props.children}</div>;
    const About = (props) => <div><h1>About</h1>{props.children}</div>;
    const Contact = () => <div><h1>Contact</h1></div>;
    
    
    const Links = () =>
        <nav >
            <Link activeStyle={{color: 'green'}} to="/">Home</Link>
            <Link activeStyle={{color: 'green'}} to="/about">About</Link>
            <Link activeClassName="active" to="/about/contact">Contact</Link>
        </nav>;
    
    class App extends React.Component {
        render(){
            return(
                <Router history={hashHistory}>
                    <Route path="/" component={Home}>
                        <Route path="about" component={About}>
                            <Route path="contact" component={Contact}></Route>
                        </Route>
                    </Route>
                </Router>
            );
        }
    }
    
    export default App;
  • 相关阅读:
    鸡兔同笼问题多解
    JavaSE复习日记 : 循环语句(for/while/do while)
    JavaSE复习日记 : 八种基本数据类型
    递归函数
    JavaSE复习日记 : 条件判断语句
    访问权限系列一(public/private/protected/default):成员变量
    JavaSE复习日记 : 算是个小前言吧
    转:SQL Server 索引和视图
    转:SQL Server 数据库基础编程
    转:在网页html/aspx中增加一段播放器代码
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5331180.html
Copyright © 2011-2022 走看看