# 具体遇到的问题
配置路由失败
# 报错信息的截图

# 尝试过的解决思路和结果
路由安装了，也引用了
# 粘贴全部相关代码，切记添加代码注释（请勿截图）

=========== index.js入口文件  ===============

import React, { Component, Fragment } from 'react';

import ReactDom from 'react-dom';

// react路由

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

// header组件

import AppHeader from './components/Header/header';

// content组件

import List from './containers/List/list';

import Detail from './containers/Detail/detail';

// antd样式组件库

import 'antd/dist/antd.css';

import { Layout } from 'antd';

// css样式文件

import './style.css'

const { Header, Footer, Content } = Layout;

class App extends Component {

    render() {

        return (

            <Layout style={{minWidth: 1300 }}>

                <Header className='header'>

                    <AppHeader />

                </Header>

                <Content className='content'>

                    <BrowserRouter>

                        <Fragment>

                            <Router path='/' component={List} />

                            <Router path='/detail' component={Detail} />

                        </Fragment>

                    </BrowserRouter>

                </Content>

                <Footer className='footer'>

                    Footer

                </Footer>

            </Layout>

        )

    }

}

ReactDom.render(<App />, document.getElementById('root'))

=========  details.js 详情页文件 =========

import React, { Component, Fragment } from "react";

class Detail extends Component {

    render() {

        return (

            <Fragment>

                <div>detail</div>

            </Fragment>

        )

    }

}

export default Detail;

​

==========  list.js 列表页文件 ===========

import React, { Component, Fragment } from "react";

class List extends Component {

    render() {

        return (

            <Fragment>

                <div>List</div>

            </Fragment>

        )

    }

}

export default List;