react 脚手架 & 路由

1. 脚手架安装

全局安装：
npm i create-react-app -g

创建项目：
npx create-react-app my-app

启动项目：
npm start

2. 路由的理解

一个路由就是一个映射关系（key:value）

后台路由： 用来处理客户端提交的请求并返回相应的数据
前台路由：不同路由对应不同的组件

3. 路由

安装： cnpm i react-router-dom --save

相关组件：

<BrowserRouter>
<HashRouter>
<Route>
<Redirect>
<Link>
<NavLink>
<Switch>

import React, { Component } from 'react';
import {BrowserRouter, Route, Switch, NavLink} from  'react-router-dom'
import News from './Componnet/News.jsx'
import  Home from './Componnet/Home.jsx'  
import  not404 from './Componnet/not404.jsx'  
import './App.css'


class App extends Component {
  render() {
    return (
      // BrowserRouter 路由根基
      <BrowserRouter>
      <div>
        <NavLink  exact activeClassName='hover' to='/'>news</NavLink>  | 
        <NavLink  activeClassName='hover' to='/home'>home</NavLink>

        <Switch>
          {/* exact 精准匹配 */}
          <Route  exact path='/' component={News}></Route>
          <Route path='/home' component={Home}></Route>
          {/* 访问不存在页面 */}
          <Route  component={not404}></Route>
        </Switch>
     </div>
     </ BrowserRouter>

    );
  }
}

export default App;

2. 二级路由

新闻页面

import React, { Component } from 'react';
import {
    NavLink
} from 'react-router-dom'

class News extends Component {
    render() {
        return (
            <div>
                <h2>news组件</h2>
                <ul>
                    <li> <NavLink to={'/newsdetails/111'}> 新闻详情页111</NavLink> </li>
                </ul>
            </div>
        );
    }
}

export default News;

新闻详情页

import React, { Component } from 'react';

class newsdetails extends Component {
    render() {
        console.log(this)
        return (
            <div>
                <h3>新闻详情页</h3>
            </div>
        );
    }
}

export default newsdetails;

app.js

import React, { Component } from 'react';
import {BrowserRouter, Route, Switch, NavLink} from  'react-router-dom'
import News from './Componnet/News.jsx'
import  Home from './Componnet/Home.jsx'  
import  not404 from './Componnet/not404.jsx'  
import  Newsdetails from './Componnet/newsdetails.jsx'  
import './App.css'


class App extends Component {
  render() {
    return (
      // BrowserRouter 路由根基
      <BrowserRouter>
      <div>
        <NavLink  exact activeClassName='hover' to='/'>news</NavLink>  | 
        <NavLink  activeClassName='hover' to='/home'>home</NavLink>

        <Switch>
          {/* exact 精准匹配 */}
          <Route  exact path='/' component={News}></Route>
          <Route path='/home' component={Home}></Route>
          <Route path="/newsdetails/:id" component={Newsdetails}/>
          {/* 访问不存在页面 */}
          <Route  component={not404}></Route>
  
        </Switch>
     </div>
     </ BrowserRouter>

    );
  }
}

export default App;