background

Recently, I wrote a simple Hello World program to invert react family bucket. When using the IndexRoute of react router, the browser reported an error

Demand style

The default Home page is Home, which you want to achieve through IndexRoute

Project dependent version

  "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"
  }

Browser error

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

Obviously, IndexRoute is no longer supported in the new version of react router

Code difference between new and old ways

The old way

    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;

New way to achieve

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;

explain

Put it into your App component. You don't think of Route as a Route, but as a Div. what is contained in the div is what you want to display. So where it should be, it will be put... , read it several times).
The outermost layer is as follows: the entry of all requests

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> 
         )  

    }

}