react-router-dom路由配置

Question

问题描述

配置React项目的路由，一直报：TypeError: Cannot read property 'location' of undefined，要如何解决？

问题出现的环境背景及自己尝试过哪些方法

找了文档，都是以<Route path="/about" component={About}/>这种形式的，但是我这是统一写在一个router文件夹中的
百度了下，只看到一个人是说react-router版本的问题，说将 package.json 里面配置： "react-router": "^3.0.0" 改为3.x 就可以了，但是我用的是"react-router-dom": "^4.3.1"的版本
然后又百度找了react路由配置的文件，觉得大神们写的有点复杂，就想着自己先动手写个简单的。

相关代码

router/index.js
const routes = [{
    path: '/invite',
    component: () => import('../views/Invite/Invite')
}]

const router = (props) => (
    <Router forceRefresh={!supportsHistory}>
        <Switch>
          <Route exact path="/" render={() => <Redirect to="/invite"/>} />
          {routes.map(({ path, component }, index) => (
            <Route
              key={index}
              exact
              path={path}
              component={component}
            />
          ))}
        </Switch>
    </Router>
  )
  
  export default router

你期待的结果是什么？实际看到的错误信息又是什么？

错误信息：

刚学React不久，又是第一次搞React的路由，各位大神帮我看看是哪里写错了，谢谢了~

Answer 1

import ...

const routes=[...]

const RouteApp = () =>
  <Provider>
      <BrowserRouter>
        <Switch>
            <Route path="/" .../>
            {routes.map(({ path, component }, index) => (
                <Route
                    key={index}
                    exact
                    path={path}
                    component={component}
                />
            ))}
        </Switch>
      </BrowserRouter>
  </Provider>;

export default RouteApp

Answer 2

你的路由没配置history

Answer 3

1.路由文件

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

import Home from '../page/Home/home';
import User from '../page/User/user';
import NotFound from '../component/NotFound/NotFound';

class RouterMap extends Component {
    constructor(props, context){
        super(props, context);
    }
    render(){
        return (
            <HashRouter>
                <Switch>
                    <Route path='/Home' component={Home}/>
                    <Route path='/User' component={User}/>
                    <Route path='*' component={NotFound}/>
                </Switch>        
            </HashRouter>
        )
    }
}

export default RouterMap

2.使用
入口文件

import React from 'react';
import ReactDOM from 'react-dom';
import '../src/media/css/index.css';
import registerServiceWorker from './registerServiceWorker';
import RouterMap  from './router/RouterMap';
import { Provider } from 'react-redux';

ReactDOM.render(<RouterMap />, document.getElementById('root'));
registerServiceWorker();

我也刚学

Answer 4

<Route path="/page2"  render={ props => <Page2 {...props} /> }/>