react 路由

路由

安装

 npm install react-router-dom

 // index.js入口文件
 import React from 'react'
 import ReactDOM from 'react-dom'
 import {BrowserRouter, HashRouter} from 'react-router-dom' //引入安装的路由
 import App from './components/App'
 ​
 ReactDOM.render(
   (
     <BrowserRouter>
       <App/>
     </BrowserRouter>
     /*<HashRouter>
       <App />
     </HashRouter>*/
   ),
 ​
   document.getElementById('root')
 )

React Router 推荐使用 BrowserRouter，因为 BrowserRouter 使用的是基于 HTML 5 的 History API，浏览器提供相应的接口来修改浏览器的历史记录，而 HashRouter 是通过改变地址后面的 hash 来改变浏览器的历史记录。

随后在App.jsx

 // App.jsx
 import {Route, Switch, Redirect,Link} from 'react-router-dom' //注意首字母大写
 import About from '../views/about'      //引入视图
 import Home from '../views/home'
 ​
 <Link className="list-group-item" to='/about'>About</Link>
 <Link className="list-group-item" to='/home'>Home</Link>
 ​
 <Switch>
     <Route path='/about' component={About}/>
     <Route path='/home' component={Home}/>
     <Redirect to='/about'/>
 </Switch>

在 App.js 中，我们还引入了 2 个组定义组件，分别是 Home 和 About，对应的代码如下：

 // views/Home.js
 import React from 'react'
 export default function About() {
   return <div>Home组件内容</div>
 }
 // views/About
 import React from 'react'
 export default function About() {
   return <div>About组件内容</div>
 }

嵌套路由

往往一层路由无法满足我们的业务需求，嵌套路由在项目中是非常常见的。 我们对我们的 Home 组件进行改造，使其下面再嵌套一层。

 export default function Home() {
     return (
         <div>
       <h2>Home组件内容</h2>
       <div>
         <ul className="nav nav-tabs">
           <li>
             <Link to='/home/news'>News</Link>
           </li>
           <li>
             <Link to="/home/message">Message</Link>
           </li>
         </ul>
         <Switch>
           <Route path='/home/news' component={New} />
           <Route path='/home/message' component={Messages} />
           <Redirect to='/home/news'/>
         </Switch>
       </div>
     </div>
     )
 }

在home中我们新建了两个文件 代码如下

 //message.jsx
 import React, { useState, useEffect } from "react";
 import { Link, Route } from "react-router-dom";
 import MessageDetail from "./message-detail";
 ​
 export default function Messages(props) {
   let [message, setMessage] = useState([]);
   useEffect(() => {
       //设置异步代码
     setTimeout(() => {
       const data = [
         { id: 1, title: "Message001" },
         { id: 3, title: "Message003" },
         { id: 6, title: "Message006" },
       ];
       setMessage(data);
     }, 1000);
   }, []);
 ​
   let path = props.match.path;
   console.log(path);
 ​
   let lis = message.map((item) => {
     return (
       <div key={item.id}>
         <Link to={`${path}/${item.id}`}>{item.title} </Link>
         <button onClick={() => ShowDetail(item.id)}>push</button>
         <button onClick={() => replacead(item.id)}>replace</button>
       </div>
     );
   });
   function ShowDetail(id) {
     props.history.push(`${path}/${id}`);
   }
 ​
   function back() {
     props.history.goBack();
   }
   function forward() {
     props.history.goForward();
   }
   function replacead(id){
     props.history.replace(`${path}/${id}`);
   }
 ​
   return (
     <ul>
       {lis}
       <div>
         <Route path={`${path}/:id`} component={MessageDetail}></Route>
         <button onClick={back}>back </button>
         <button onClick={forward}>forward </button>
       </div>
     </ul>
   );
 }
 ​

 //message-detail.jsx
 // views/message-detail.js
 import React from 'react'
 ​
 let messageDetails = [
   {id: 1, title: 'Message001', content: '这是no1'},
   {id: 3, title: 'Message003', content: '这是no2'},
   {id: 6, title: 'Message006', content: '这是no3'},
 ]
 ​
 export default function MessageDetail(props) {
   
     // 同样通过 props.match 来拿到传递过来的 id
     let id = props.match.params.id
     // 通过 id 找到对应的内容
     let md = messageDetails.filter(item=>{
         return item.id==id
     })
 console.log(md);
     return (
     <ul>
         <li>ID: {md[0].id}</li>
         <li>title: {md[0].title}</li>
         <li>content: {md[0].content}</li>
     </ul>
     )
 }

 //New.jsx
 import React from 'react'
 ​
 export default class News extends React.Component {
   state = {
     newsArr: ['news001', 'news002', 'news003']
   }
 ​
   render () {
     return (
       <div>
         <ul>
           {
             this.state.newsArr.map((news, index) => <li key={index}>{news}</li>)
           }
         </ul>
       </div>
     )
   }
 }