Из-за чего выходит ошибка TypeError: Cannot read property 'location' of undefined?

Question

[hollanditkzn]

В браузере выходит данная ошибка
Это главная старница.

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Switch } from 'react-router';
import Auth from './component/AuthForm';

ReactDOM.render(
    <Router>
        <Switch>
            <Route path='/' component={Auth}/>
        </Switch>
    </Router>,
    document.getElementById('content')
);

Не знаю что еще писать. Использую в связке node js если имеет значение

Comments

[Анатолий Жаров]

Можно взглянуть на реализацию Auth?

[Yustas Alexu]

ошибка должна указывать на какую-то строчку кода в каком-то файле. Приведите полный текст ошибки.

[Сергей Сунцев]

По всё видимости вы получаете параметр location из props, в котором данного параметра нет.

[hollanditkzn]

SeaBreeze876,

import React from 'react';
import ReactDOM from 'react-dom';
import Helmet from '../aplication';
import TextField from 'material-ui/TextField';
import RaiseButtin from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();

class UserForm extends React.Component{
    state = {
        login: "",
        password: "",
    };

    handleChange = e => {
        const { name, value } = e.target;

        this.setState({
            [name]: value,
        });
    }
    render(){
        const { login, password } = this.state;
        return(
            <div>
                <Helmet title='Авторизация'/>
                <form method='post' action="/">
                    <MuiThemeProvider>
                        <TextField
                            hintText="Введите логин"
                            name="login"
                            fullWidth={true}
                            value={login}
                            required={true}
                            onChange={this.handleChange}
                        />
                    </MuiThemeProvider>
                    <MuiThemeProvider>
                        <TextField
                            hintText="Введите пароль"
                            type="password"
                            name="password"
                            fullWidth={true}
                            value={password}
                            required={true}
                            onChange={this.handleChange}
                        />
                    </MuiThemeProvider>
                    <MuiThemeProvider>
                        <RaiseButtin label="Войти" fullWidth={true} className="authForm-button"> <input type="submit" className="authForm-input" /> </RaiseButtin>
                    </MuiThemeProvider>
                </form>
            </div>
        );
    }
}

ReactDOM.render(
    <UserForm />,
    document.getElementById('content')
);

В Helmet

import React from 'react';
import { Helmet } from 'react-helmet';

class Application extends React.Component{
    constructor(prop){
        super(prop);
    }
    render(){
        return(
            <div className='application'>
                <Helmet>
                    <meta charSet='utf-8' />
                    <title>{this.props.title}</title>
                </Helmet>
            </div>
        );
    }
}

module.exports = Application;

[hollanditkzn]

Yustas Alexu, react-dom.production.min.js:164 TypeError: Cannot read property 'location' of undefined
at new t (Router.js:31)
at constructClassInstance (react-dom.production.min.js:109)
at beginWork (react-dom.production.min.js:133)
at o (react-dom.production.min.js:161)
at a (react-dom.production.min.js:161)
at l (react-dom.production.min.js:162)
at k (react-dom.production.min.js:169)
at x (react-dom.production.min.js:168)
at h (react-dom.production.min.js:167)
at d (react-dom.production.min.js:165)

[hollanditkzn]

Ошибка в Helmet

Answer 1

[Анатолий Жаров]

Следует использовать BrowserRouter вместо Router, либо задать для Router объект history

Comments

[hollanditkzn]

Я так и не понял в чем разница BrowserRouter, можете объяснить?

[Анатолий Жаров]

в react-router версии 4 унифицировали Router для различного окружения, BrowserRouter это обертка Router, предназначенная именно для браузеров

[Анатолий Жаров]

https://reacttraining.com/react-router/web/api/Router