react-router

第一步，配置路由

import React from 'react'
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'
import Home from '../views/home'
import Films from '../views/films'
import Center from '../views/center'
import NotFound from '../views/notfound'
import Films1 from '../views/detail/1'
import Login from '../views/login'


function isAuth() {
    return localStorage.getItem('token')
}
// 函数式组件没有this
export default function indexRouter(props) {
    const fun1 = () => {
        console.log(props);
    }
    return (

        <div>
            {/* {fun1()} */}
            {/* hash HashRouter 路径有#号  BrowserRouter 没有#号*/}
            <Router>
                {props.children}
                {/* switch 匹配不到时 执行redirect */}
                <Switch>
                    <Route path="/home" component={Home}></Route>
                    <Route path="/films" component={Films}></Route>
                    <Route path="/center" render={() => {
                        return isAuth() ? <Center /> : <Redirect to="login" ></Redirect>
                    }}></Route>


                    <Route path="/login" component={Login}></Route>
                    {/* 动态路由 */}
                    <Route path='/detail/:myid' component={Films1}></Route>
                    {/* query传参 */}
                    {/* <Route path='/detail' component={Films1}></Route> */}

                    {/* 模糊匹配 以上都不匹配执行下面路由  路由重定向*/}
                    {/* 精确匹配 exact */}
                    <Redirect from="/" to="home" exact></Redirect>
                    {/* 错误路径执行以下路由 */}
                    <Route component={NotFound}></Route>
                </Switch>
            </Router>

        </div>

    )
}

第二步，创建页面组件

第三步，创建路由点击组件，使用NavLink

<NavLink to={item.url} activeClassName="active1">{item.name}</NavLink>

　　to跟路径，activeClassName处在页面是css状态，

import React, { useState } from 'react'
import { NavLink } from 'react-router-dom'
import './tabBar-style.css'
export default function tabBar() {
    const [name, setName] = useState([{
        name: '首页',
        url: '/home'
    }, {
        name: '电影',
        url: '/films'
    }, {
        name: '我的',
        url: '/center'
    }])
    const [urlList, setList] = useState([])
    return (
        <div className="tabBar">
            <ul>
                {name.map((item, index) =>
                    <li key={index}>
                        {/* <a href={item.url}>{item.name}</a> */}
                        {/* activeClassName="active" */}
                        <NavLink to={item.url} activeClassName="active1">{item.name}</NavLink>
                    </li>
                )}
            </ul>
        </div>
    )
}

 嵌套路由

import React from 'react'
import NowPlaying from './home/nowPlaying'
import ComingSoon from './home/comingSoon'
import { Route, Switch, Redirect } from 'react-router-dom'
import NotFound from './notfound'
import Films1 from './detail/1'
import Rotation from '../../02-base/Rotation'
import NavBar from '../components/navBar'

export default function home(props) {
    const fun1 = () => {
        console.log(props);
    }
    return (
        <div>
            {fun1()}
            <Rotation></Rotation>
            <NavBar></NavBar>
            {/* 嵌套路由 */}
            <Switch>
                <Route path='/home/nowPlaying' component={NowPlaying}></Route>
                <Route path='/home/comingSoon' component={ComingSoon}></Route>
                <Route path='/detail/1' component={Films1}></Route>
                {/* 模糊匹配 以上都不匹配执行下面路由  路由重定向*/}
                {/* 精确匹配 exact */}
                <Redirect from="/home" to="/home/nowPlaying" exact></Redirect>
                {/* 错误路径执行以下路由 */}
                <Route component={NotFound}></Route>
            </Switch>
            {/* <NowPlaying></NowPlaying> */}
        </div>
    )
}