react-router多级路由设置默认子路由

最终效果图

目录文件路径

代码

src/App.js

多级路由的Route配置不能加 exact， 否则子路由匹配不进去

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import Home from './Page/Home'
import News from './Page/News'

class App extends React.Component {

  render() {
    return (<div>
      <Router>
        <div style={{ width: '20%', height: '200px', float: 'left', backgroundColor: '#eee' }}>
          <h2>一级路由</h2>
          <ul>
            {/* 使用Link组件设置路由跳转 to属性值为跳转路径 */}
            <li><Link to='/'>home</Link></li>
            <li><Link to='/news'>News</Link></li>
          </ul>
        </div>
        <div style={{ width: '70%', float: 'left' }}>
          {/* 使用Route设置路由配置  component属性值为匹配路径后跳转的组件页面*/}
          <Route path='/' exact component={Home} />

          {/* 多级路由 这里不能加 exact  否则子路由匹配不进去 */}
          <Route path='/news' component={News} />
        </div>
      </Router>
    </div >)
  }
}
export default App;

src/Page/Home.js

import React from 'react';

export default function Home() {
    return (
        <div>
            Home
        </div>
    )
}

src/Page/News.js
二级路由的默认子路由路径和父路由一致 并且设置exact属性
若不设置exact属性 则每次都会保留GameNews页面

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom'
import CarNews from './NewsPage/CarNews'
import GameNews from './NewsPage/GameNews'
import SportsNews from './NewsPage/SportsNews'
class News extends Component {
    render() {
        return (
            <div>
                <ul>
                    <h3>二级路由:</h3>
                    <li style={{ display: 'inline-block', margin: '10px' }}>
                        <Link to='/news/'>GameNews</Link>
                    </li>
                    <li style={{ display: 'inline-block', margin: '10px' }}>
                        <Link to='/news/carNews'>CarNews</Link>
                    </li>
                    <li style={{ display: 'inline-block', margin: '10px' }}>
                        <Link to='/news/sportsNews'>SportsNews</Link>
                    </li>
                </ul>
                <div style={{ paddingLeft: '80px' }}>
                    {/* 二级路由的默认子路由路径和父路由一致 并且设置exact属性 该页面默认进入GameNews页面*/}
                    {/* 若不设置exact属性 则每次都会保留GameNews页面 */}
                    <Route path='/news/' exact component={GameNews}></Route>

                    <Route path='/news/carNews' component={CarNews}></Route>
                    <Route path='/news/sportsNews' component={SportsNews}></Route>
                </div>
            </div>
        );
    }
}
export default News;

src\Page\NewsPage\CarNews.js

import React from 'react';

export default function CarNews() {
    return (
        <div>
            二级页面内容：CarNews
        </div>
    )
}

src\Page\NewsPage\GameNews.js

import React from 'react';

export default function GameNews() {
    return (
        <div>
            二级页面内容： GameNews
        </div>
    )
}

src\Page\NewsPage\SportsNews.js

import React from 'react';

export default function SportsNews() {
    return (
        <div>
            二级页面内容： SportsNews
        </div>
    )
}