Reacr-Router 4的问题

[email protected]：

• React Router被拆分成三个包：react-router,react-router-dom和react-router-native，目前网站搭建只需要引入react-router-dom即可；

• 路由器组件无法接受两个及以上的子元素；

npm安装react-router-dom

npm install react-router-dom

用法：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route , Link ,Switch,Redirect } from 'react-router-dom';
import './index.css';
import {App} from './App';
import {IndexB} from './component/index/index'
import {TV} from './component/tv/tv'
import {Show} from './component/show/show'
import {My} from './component/my/my'
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
        <BrowserRouter>
            <Switch>
                <Route path='/' exact component={App}>Route>
                <Route path='/index' component={IndexB}>Route>
                <Route path='/tv' component={TV}>Route>
                <Route path='/show' component={Show}>Route>
                <Route path='/my' component={My}>Route>
            Switch>

        BrowserRouter>
        ,
    document.getElementById('root')
);
registerServiceWorker();

indexjs文件中匹配出路由指向的组件分别是什么

app.js

import React, { Component } from 'react';
import { BrowserRouter, Route , Link } from 'react-router-dom';
import './App.css';
import {FootNav} from './component/footNav/footnav'


export class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>heh1>
          <FootNav>FootNav>
      div>
    );
  }
}

入口Appjs中把footnav组件引入

footnav.jsx

import React, { Component } from 'react';
import { BrowserRouter, Route , Link } from 'react-router-dom';
import './footnav.css'
import {IndexB} from '../index/index'
import {TV} from '../tv/tv'
import {Show} from '../show/show'
import {My} from '../my/my'


export class FootNav extends Component{
    constructor(pros){
        super(pros);
    }

    render(){
        return(
            <div className=''>
                <Link to="/" component={IndexB}>首页Link>
                <Link to="/tv" component={TV}>分类Link>
                <Link to="/show" component={Show}>购物车Link>
                <Link to="/my" component={My}>我的Link>
            div>
        )
    }

}

使用Link to 做路由导航

配置的四个路由指向地址

启动项目查看

根据路由匹配到不同组件

以上的react-router-dom的基本实现方法

更多用法  GitHub上的React-Router-Dom使用指南

npm安装react-router-dom