Reacr-Router 4的问题

最新推荐文章于 2025-07-30 10:41:36 发布

Lucio_cn

最新推荐文章于 2025-07-30 10:41:36 发布

阅读量4.2w

点赞数

CC 4.0 BY-SA版权

分类专栏： ReactJs

本文链接：https://blog.youkuaiyun.com/lizhipeng123321/article/details/79866582

ReactJs 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了React-Router v4的变化，包括被拆分为`react-router`, `react-router-dom`, 和`react-router-native`三个包。在实际应用中，主要使用`react-router-dom`。注意，路由器组件不再接受多个子元素。通过`npm install react-router-dom`进行安装，并在`index.js`和`app.js`中设置路由。在`footnav.jsx`中使用`Link`进行导航。文中展示了四个路由配置，并启动项目验证路由匹配。提供了一个基本的React-Router-Dom实现步骤，建议参考GitHub上的官方指南了解更多详细用法。" 116954120,10295123,Linux CAS原子操作详解与性能测试,"['Linux', '并发编程', '原子操作', '__sync_bool_compare_and_swap']

react-router@v4.0：

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>he</h1>
          <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>
        )
    }

}