React 嵌套路由

👁 2021-02-16

如何使用React 嵌套路由

本片文章将使用如下小案例进行讲解使用嵌套路由

1 创建News,Message组件

分析页面可以发现，在Home组件中含有另外的路由，可以分为News,Message

Message组件，则在Home组件中创建这两个组件。

import React, { Component } from 'react';

class Message extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>me1</li>
                    <li>me2</li>
                    <li>me3</li>
                </ul>
            </div>
        );
    }
}

export default Message;

News组件

import React, { Component } from 'react';

class News extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>new1</li>
                    <li>new2</li>
                    <li>new3</li>
                </ul>
            </div>
        );
    }
}

export default News;

2 修改Home组件

import React, { Component } from 'react';
import {Route,Redirect} from 'react-router-dom'
import MyNavLink from '../../components/MyNavLink/MyNavLink'
import News from './News/News'
import Message from './Message/Message'
class Home extends Component {
    render() {
        return (
            <div>
                <h1>home</h1>
                <div>
                    <div className="top">
                        <MyNavLink to="/home/news">News</MyNavLink>
                        <MyNavLink to="/home/message">Message</MyNavLink>
                    </div>
                    <div className="bottome">
                        <Route path="/home/news" component={News}></Route>
                        <Route path="/home/message" component={Message}></Route>
                        <Redirect to="/home/news"></Redirect>
                        {/* 如果开启严格模式则不会匹配 */}
                    </div>
                </div>
            </div>
        );
    }
}

export default Home;

注册子路由时要写上父路由的path值

路由的匹配是按照注册路由的顺序进行的