react-routerv4版本丢弃IndexRoute

最新推荐文章于 2023-03-15 09:20:32 发布

刘承瑜

最新推荐文章于 2023-03-15 09:20:32 发布

阅读量5.8k

点赞数

分类专栏： React 文章标签： react-router IndexRoute不可用 IndexRoute报错

本文链接：https://blog.csdn.net/LiuChengYu520/article/details/82657354

版权

React 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

背景

最近在倒置react全家桶，自己写了个简单的Hello World程序，在使用 react-router 的 IndexRoute时，浏览器报错

需求样式

这里写图片描述

默认主页是 Home，想通过IndexRoute实现

项目相关依赖版本

  "dependencies": {
    "react": "^16.5.0",
    "react-dom": "^16.5.0",
    "react-redux": "^5.0.7",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.5",
    "redux": "^4.0.0"
  }

浏览器报错

./src/routes/index.js
27:28-38 'react-router-dom' does not contain an export named 'IndexRoute'.

很明显，新版本的react-router已经不支持IndexRoute

新老方式代码差别

老方式实现

	import React from 'react';
	import {IndexRoute, Route} from 'react-router';
	import {BrowserRouter} from 'react-router-dom';
	
	import Home from '../pages/Home';
	import Frame from '../layouts/Frame';
	import Detail from '../pages/Detail';
	
	const routes = (
	    <BrowserRouter>
	        <Route path="/" component={Frame}>
	            <Route exact path="/" component={Home}/>
	            <Route path="/detail" component={Detail}></Route>      
	        </Route>
	    </BrowserRouter>
	);
	
	export default routes;

新方式实现

import React from 'react';
import {BrowserRouter, Route} from 'react-router-dom';

import Home from '../pages/Home';
import Frame from '../layouts/Frame';
import Detail from '../pages/Detail';

const routes = (
        <BrowserRouter>
            <Frame>             
                <Route path="/" exact component={Home}/>
                <Route path="/detail" component={Detail}></Route>         
            </Frame>
        </BrowserRouter>        
);

export default routes;

解释

react-router4没有indexRoute了。 react-router4版本中路由的本质变成了React组件，也就是自定义标签。所以你可以像使用组件一样是用路由。那么嵌套路由无非就是组件嵌套的写法（自定义标签嵌套而已）

放到你的App组件里面去，你把Route不要看做路由，就看做div，div里面包含的就是你要显示的内容。那么它应该在哪里，它就放在哪里（有点绕。。。，多读几遍）。
最外层就如下写: 所有请求的入口

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

class App extends React.Component {
    render() {
        return(
             <div>
                 <Header/>
                  <div>
                     <Route path="/" exact component={Home} />
                     <Route path="/topics" component={Topics} />
                     <Route path="/jobs" component={Jobs} />
                     <Route path="/remote" component={Remote} />
                  </div>
             
             </div> 
         )  
    
    }

}