重温react-13(嵌套路由和重定向等)

重定向和404

import React from 'react';
import { Routes, Route, Link,NavLink ,Navigate} from 'react-router-dom';
import Home from './Home/Home'
import About from './About/About'
import News from './News/News'
import NotFound from './NotFound/NotFound';
export default function BoxReact() {
  return (
    <>
      {/* <Link to="/">首页</Link>
      <Link to="/about">关于页</Link>
      <Link to="/news">新闻页面</Link> */}
      <NavLink to="/home">首页</NavLink>
      <NavLink to="/about">关于页</NavLink>
      <NavLink to="/news">新闻页面</NavLink>
      <Routes>
        <Route path='/home' element={<Home></Home>}></Route>
        <Route path='/about' element={<About></About>}></Route>
        <Route path='*' element={<NotFound></NotFound>}></Route>
        <Route path='/' element={<Navigate to="/home"></Navigate>}></Route>
      </Routes>
    </>
  )
}

主要的代码部分有

 <Route path='*' element={<NotFound></NotFound>}></Route>

 <Route path='/' element={<Navigate to="/home"></Navigate>}></Route>

这两段代码表示404和重定向

嵌套路由

App.js中的代码

import React from 'react';
import { Routes, Route, Link,NavLink ,Navigate} from 'react-router-dom';
import Home from './Home/Home'
import About from './About/About'
import News from './News/News'
import NotFound from './NotFound/NotFound';
import NewsSonOne from './NewsSonOne/NewsSonOne';
import NewsSonTwo from './NewsSonTwo/NewsSonTwo';
export default function BoxReact() {
  return (
    <>
      {/* <Link to="/">首页</Link>
      <Link to="/about">关于页</Link>
      <Link to="/news">新闻页面</Link> */}
      <NavLink to="/home">首页</NavLink>
      <NavLink to="/about">关于页</NavLink>
      <NavLink to="/news">新闻页面</NavLink>
      <Routes>
        <Route path='/home' element={<Home></Home>}></Route>
        <Route path='/about' element={<About></About>}></Route>
        <Route path='/news' element={<News></News>}>
            <Route path='/news/newsSonOne' element={<NewsSonOne></NewsSonOne>}></Route>
            <Route path='/news/newsSonTwo' element={<NewsSonTwo></NewsSonTwo>}></Route>
        </Route>
        <Route path='*' element={<NotFound></NotFound>}></Route>
        <Route path='/' element={<Navigate to="/home"></Navigate>}></Route>
      </Routes>
    </>
  )
}

News.jsx中的代码

import React from 'react'
import { Outlet,NavLink } from 'react-router-dom'
export default function News() {
  return (
    <div>
      <h1>这是新闻页面</h1>
      <NavLink to="/news/newsSonOne">第一个</NavLink>
      <NavLink to="/news/NewsSonTwo">第二个</NavLink>
      <Outlet></Outlet>
    </div>
  )
}

Outlet这个是子路由出现的窗口,没有会没有出现子路由的视图

NewsSonOne.jsx中的代码

import React from 'react'

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

NewsSonTwo.jsx中的代码

import React from 'react'

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

效果图