react-router-dom路由配置

問題描述

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

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

找了文檔，都是以<Route path="/about" component={About}/>這種形式的，但是我這是統(tǒng)一寫在一個router文件夾中的
百度了下，只看到一個人是說react-router版本的問題，說將 package.json 里面配置： "react-router": "^3.0.0" 改為3.x 就可以了，但是我用的是"react-router-dom": "^4.3.1"的版本
然后又百度找了react路由配置的文件，覺得大神們寫的有點復(fù)雜，就想著自己先動手寫個簡單的。

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？

錯誤信息：

剛學(xué)React不久，又是第一次搞React的路由，各位大神幫我看看是哪里寫錯了，謝謝了~

回答

編輯回答

舊時光

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

我也剛學(xué)

2017年4月29日 21:52

編輯回答

壞脾滊

你的路由沒配置history

2018年2月28日 14:21

編輯回答

柒喵

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

2018年7月28日 06:05

編輯回答

假灑脫

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

2017年9月19日 14:18