We Keep Coding

JSX element type 'Route' does not have any construct or call signatures - route problem

I have got error with Route "message": "JSX element type 'Route' does not have any construct or call signatures."
in Browser:
./src/app/layout/App.tsx
Attempted import error: 'react-router-dom' does not contain a default export (imported as 'Route').
Really I don`t know what is wrong.
import React from "react";
import NavBar from "../../features/nav/NavBar";
import Footer from "../../features/footer/Footer";
import Route, { BrowserRouter } from "react-router-dom";
import Dashboard from "../../features/dashboard/Dashboard";
import TestApiDashboard from "../../features/testApiDashboard/TestApiDashboard";
const App = () => {
return (
<div>
<div className="main">
<NavBar />
<Route path="/" component={Dashboard} />
<Route path="/testApiDashboard" component={TestApiDashboard} />
<Route path="/" component={Dashboard} />
</div>
<Footer />
</div>
);
};
export default App;
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import './app/layout/styles.css';
import App from './app/layout/App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();

You need to import differently as the following:
import {
BrowserRouter,
Route,
} from "react-router-dom";
Instead of your code snippet:
import Route, { BrowserRouter } from "react-router-dom";
You can read further at <Route />. I hope this helps!

this.props.children isnt working with react-router

i am trying to make a navigaton on my website by react-router and typescript. but its not working and instead of Home page i get an empty page
Thats my app.tsx file
// app.tsx
import * as React from 'react';
import '../App.css';
class App extends React.Component<any,any> {
public render() {
return (
<div>
{this.props.children}
</div>
);
}
}
export default App;
index.tsx
// index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import {AppRouter} from './router';
ReactDOM.render(
<AppRouter/>,
document.getElementById('root') as HTMLElement
);
registerServiceWorker();
router.tsx
import * as React from 'react';
import { Route,Router } from 'react-router';
import App from './components/App';
import HomePage from './components/home/HomePage';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
export const AppRouter = () => {
return (
<Router history={history}>
<Route path="/" component={App} >
<Route path="/" exact={true} component={HomePage} />
</Route>
</Router>
);
}
i dont really dont know what to say. i cant find any possible info about this. If u know better way to make navigation with typescript, react and redux i am open for ideas. thx

In the App component, you are doing {this.props.children}. So you should not pass that component to any route.
You need to add all the routes as a child of that component through which you will get the children in your props.
Also, for switching between routes, you should bind all the routes in the 'Switch' imported from react-router.
So, your router.tsx file should look like:
import * as React from 'react';
import { Route, Router, Switch } from 'react-router';
import App from './components/App';
import OtherComponent from './components/OtherComponent';
import HomePage from './components/home/HomePage';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
export const AppRouter = () => {
return (
<App>
<Router history={history}>
<Switch>
<Route exact={true} component={HomePage} />
<Route path="/other" component={OtherComponent} />
</Switch>
</Router>
</App>
);
}
By this, you will get the 'HomePage' component at route '/' and OtherComponent at route '/other'.

Cannot read property 'location' of undefined

I try to use react-router-dom 4.0.0 library. But it send me this error
Uncaught TypeError: Cannot read property 'location' of undefined
It seems that problem in browserHistore. Before I used react-router 2.x.x and everything was alright.
This is my index.js
import 'babel-polyfill'
import React from 'react'
import { Router, hashHistory } from 'react-router-dom'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { configureStore } from './store'
import { routes } from './routes'
const store = configureStore()
render(
<Provider store={store}>
<Router history={hashHistory} routes={routes} />
</Provider>,
document.getElementById('root')
)
This is my routes
import React from 'react'
import { IndexRoute, Route } from 'react-router-dom'
import App from './containers/App'
import Main from './containers/Main'
import First from './containers/First'
export const routes = (
<Route path='/' component={Main}>
<Route path='/path' component={First} />
<IndexRoute component={App} />
</Route>
)
And also for server side express I set this get configuration
app.get('*', function root(req, res) {
res.sendFile(__dirname + '/index.html');
});

React Router v4 is a complete re-write and isn't compatible with previous versions as you're assuming in your code. With that said, you shouldn't expect to be able to just upgrade to a new major version (V4) and have your app work as normal. You should check out the documentation or downgrade back to V2/3. Here's some code that should get you started in the right direction
import 'babel-polyfill'
import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { configureStore } from './store'
import App from './containers/App'
import Main from './containers/Main'
import First from './containers/First'
const store = configureStore()
render(
<Provider store={store}>
<Router>
<Route path='/' component={Main} />
<Route path='/path' component={First} />
</Router>
</Provider>,
document.getElementById('root')
)

Check the version of react-router-dom in package.json
If its version is greater than 4 then in your file import BrowserRouter :-
import { BrowserRouter as Router, Route } from 'react-router-dom'
else if its version is less than 4 then import Router :-
import { Router, Route } from 'react-router-dom'

Install npm history package: npm i history
and then use it as follow in your index/routes file:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Switch, Route} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import App from './components/App';
import './index.css'
const history = createBrowserHistory();
ReactDOM.render(
<Router history={history}>
<Switch>
<Route path='/' component={App}/>
</Switch>
</Router>,
document.getElementById('root')
);

ReactJS is not loading/rendering

Today when I started up the iMac to continue working on the ReactJS app...it doesn't load...
What I mean by "load" is, it doesn't display the content of any page.
Error:
Uncaught TypeError: Cannot read property 'getCurrentLocation' of undefined
If you need the code of App.js and index.js
here they are:
App.js:
import React, { Component } from 'react';
import Header from './pages/Header';
import Footer from './pages/Footer';
import './css/App.css';
class App extends Component {
render() {
return (
<div className="App">
<Header />
{/*Content*/}
<div> App Page </div>
<Footer />
</div>
);
}
}
export default App;
index.js:
import { Router, Route, History } from 'react-router';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// CSS
import './css/index.css';
// Pages
import About from './pages/About';
import Register from './pages/Register';
import Cart from './pages/Cart';
import Thanks from './pages/Thanks';
import Faq from './pages/Faq';
import Contact from './pages/Contact';
import Error from './pages/Error';
ReactDOM.render((
<Router history={History}>
<Route path="/" component={App}>
<Route path="/pages/about" component={About}/>
<Route path="/pages/Register" component={Register}/>
<Route path="/pages/Cart" component={Cart}/>
<Route path="/pages/Thanks" component={Thanks}/>
<Route path="/pages/Error" component={Error}/>
<Route path="/pages/Faq" component={Faq}/>
<Route path="/pages/Contact" component={Contact}/>
</Route>
</Router>
), document.getElementById('root'))

According to your comment, your history object is undefined. Please try importing browserHistory instead of History and pass that into your router.
versions before React-Router v4 (Which I am assuming you are using since you are importing Router:
import { Router, Route, browserHistory } from 'react-router';
...
....
<Router history={browserHistory}>
<Route path="/" component={App}>
React-Router v4:
Instead of importing Router/browserHistory, you import browserRouter, which is a router that creates it's own history instance. it would look like this:
import { BrowserRouter, Route } from 'react-router';
...
...
<BrowserRouter>
<Route path="/" component={App}>

React Material-UI tap event issues using while using "react-tap-event-plugin": "^1.0.0"

Facing an issue with React Tab events with mobile devices. I am getting an error below. My main issue is that I am not sure should I still use react-tao-event-plugin or is there some react native way to deal with this?
I have "react-tap-event-plugin": "^1.0.0" installed as npm package. I am also calling the tap event seem my, main.js, app.js and route.js files.
Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element.
in button (created by EnhancedButton)
in EnhancedButton (created by RaisedButton)
in div (created by Paper)
in Paper (created by RaisedButton)
in RaisedButton (created by MaterialButton)
in MaterialButton (created by Home)
in div (created by Home)
in div (created by Home)
in div (created by Home)
in Home (created by Connect(Home))
in Connect(Home) (created by RouterContext)
in div (created by App)
in MuiThemeProvider (created by App)
in App (created by RouterContext)
in RouterContext
in Provider
Main.js -->
import 'whatwg-fetch';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { Router, browserHistory } from 'react-router';
import injectTapEventPlugin from 'react-tap-event-plugin';
import configureStore from './store/configureStore';
import getRoutes from './routes';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
const store = configureStore(window.INITIAL_STATE);
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory} routes={getRoutes(store)}/>
</Provider>,
document.getElementById('app')
);
App.js -->
import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Header from './Header';
import Footer from './Footer';
class App extends React.Component {
render() {
return (
<MuiThemeProvider>
<div>
<Header/>
{this.props.children}
<Footer/>
</div>
</MuiThemeProvider>
);
}
}
export default App;
Routes.js -->
import React from 'react';
import { IndexRoute, Route } from 'react-router';
import App from './components/App';
import Home from './components/Home';
import Contact from './components/Contact';
import NotFound from './components/NotFound';
import Login from './components/Account/Login';
import Signup from './components/Account/Signup';
import Profile from './components/Account/Profile';
import Forgot from './components/Account/Forgot';
import Reset from './components/Account/Reset';
export default function getRoutes(store) {
const ensureAuthenticated = (nextState, replace) => {
if (!store.getState().auth.token) {
replace('/login');
}
};
const skipIfAuthenticated = (nextState, replace) => {
if (store.getState().auth.token) {
replace('/');
}
};
const clearMessages = () => {
store.dispatch({
type: 'CLEAR_MESSAGES'
});
};
return (
<Route path="/" component={App}>
<IndexRoute component={Home} onLeave={clearMessages}/>
<Route path="/contact" component={Contact} onLeave={clearMessages}/>
<Route path="/login" component={Login} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
<Route path="/signup" component={Signup} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
<Route path="/account" component={Profile} onEnter={ensureAuthenticated} onLeave={clearMessages}/>
<Route path="/forgot" component={Forgot} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
<Route path='/reset/:token' component={Reset} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
<Route path="*" component={NotFound} onLeave={clearMessages}/>
</Route>
);
}

Try adding the
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
in the components where it is being used, instead of on the top main.js level.