my react app works fine on my pc using google chrome (where I build it) but doesn't work on Microsoft edge, and also works fine in localhost, but on my laptop and phone it shows a blank page, my host is: http://dorian1.com/
i tried using hashrouter instead of browserrouter, adding "homepage" in my package.json,
my app.js is :
import React, { useState } from 'react'
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import './styles/App.css'
import Footer from './footer/Footer'
import Header from './header/Header'
import Search from './search/Search'
import Alert from './alert/Alert'
// PAGES
import News from './pages/news/News'
import Opinion from './pages/opinion/Opinion'
import Sport from './pages/sport/Sport'
import Culture from './pages/culture/Culture'
import Lifestyle from './pages/lifestyle/Lifestyle'
import SearchResults from './pages/searchResults/SearchResults'
import SingleArticle from './pages/SingleArticle/SingleArticle'
function App() {
const [alert, setAlert] = useState(null)
return (
<Router>
<Header />
<Alert alert={alert}/>
<Search setAlert={setAlert}/>
<Switch>
<Route exact path='/' component={News}/>
<Route path='/News' component={News}/>
<Route path='/Opinion' component={Opinion}/>
<Route path='/Sport' component={Sport}/>
<Route path='/Culture' component={Culture}/>
<Route path='/Lifestyle' component={Lifestyle}/>
<Route path='/SearchResults' component={SearchResults}/>
<Route path='/SingleArticle' component={SingleArticle}/>
</Switch>
<Footer />
</Router>
);
}
export default App;
the console on edge says :
Uncaught TypeError: Cannot read properties of undefined (reading 'apply')
at redux.js:621
at f (redux.js:154)
at Module.454 (store.js:11)
at a ((index):1)
at t ((index):1)
at Array.r [as push] ((index):1)
at main.a2301ff4.chunk.js:1
my index.js is :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// REDUX
import { Provider } from 'react-redux'
// import store from './store'
import { PersistGate } from 'redux-persist/integration/react'
import {store, persistor} from './store'
ReactDOM.render(
<Provider store={store}>
<PersistGate persistor={persistor}>
<App />
</PersistGate>
</Provider>,
document.getElementById('root')
);
i fixed it, my store js had thunk middleware imported but never used,
const middleware = [thunk];
export const store = createStore(rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));
i removed the middleware and now its working , makes no sense but hope it helps someone
Related
I am fairly new to using react and been following a couple of tutorials on YT, I have ran into a problem with one of them. I copied everything line by line, but my text on 'Home' and 'Login' doesnt display! I get no errors, but the page remains blank.
here is App.js
import React from 'react'
import { Routes, Route, useNavigate } from 'react-router-dom';
import Login from './components/Login';
import Home from './container/Home';
const App = () => {
return (
<Routes>
<Route path="login" element={<Login />} />
<Route path="/*" element={<Home />} />
</Routes>
);
};
export default App;
Also the index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root'),
);
**Then Login.jsx
**
import React from 'react';
const Login = () => {
return (
<div>
Login
</div>
);
};
export default Login;
Finally Home.jsx
import React from 'react';``your text``
const Home = () => {
return (
<div>
Home
</div>
);
};
export default Home;
I know I am missing something, but I cant seem to find it! Any and all help is very much appreciated!
Tried to see if I am using on old version of the BroswerROuter/Routes in React, but I have very little knowledge to see the difference just yet!
I am trying to run webpack dev server and I'm getting this error. History was working properly before i started using webpack module.
WARNING in ./src/history.js 2:15-35
export 'createBrowserHistory' (imported as 'createBrowserHistory') was not found in 'history' (possible exports: default)
# ./src/App.js 18:0-32 91:17-24
# ./src/index.js 4:0-24 11:20-23
History was working properly before i started using webpack module.
history.js
import { createBrowserHistory } from "history";
export default createBrowserHistory({ forceRefresh: true });
App.js
import React, { Component } from "react";
import { Route, Routes, unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import Cookies from "universal-cookie";
import history from "./history";
import LoginComponent from "./Components/login/login";
import Authenticate from "./Components/authenticate/authenticate";
import Callback from "./Components/Callback/callback";
import Home from "./Components/home/home";
import "./App.css";
import axios from "axios";
class App extends Component {
constructor(props) {
super(props);
this.state = {};
this.cookies = new Cookies();
}
render() {
return (
<div>
<HistoryRouter history={history}>
<Routes>
{/* <Route path="/login" element={<LoginComponent />} /> */}
<Route path="/authenticate" element={<Authenticate />} />
<Route path="/users/twitter_callback" element={<Callback />} />
</Routes>
</HistoryRouter>
</div>
);
}
}
export default App;
index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.min.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
// <React.StrictMode>
<App />
// </React.StrictMode>
);
reportWebVitals();
any help will be apreciated
For anyone with this same issue. I solved it by putting the history file in a sub directory and renaming it. like this "./history/browserHistory.js". This is a github issue about it https://github.com/remix-run/history/issues/793
I am trying to implement react-admin in my project however upon render I get this message
Uncaught Error: Missing history prop. When integrating react-admin inside an existing redux Provider, you must provide the same 'history' prop to the <Admin> as the one used to bootstrap your routerMiddleware. React-admin uses this history for its own ConnectedRouter.
There is very little to be found about this issue and I'm not entirely sure how to go about setting the history. I've tried importing createHistory from 'history/createHashHistory' but then I get this error
Uncaught Could not find router reducer in state tree, it must be mounted under "router"
Is there a way to get this rendering properly? And if so, what would be the proper way to go about configuring the Admin Component's history?
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore, compose, applyMiddleware} from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { BrowserRouter as Router } from 'react-router-dom';
import { reducer } from './redux/reducer';
import * as serviceWorker from './serviceWorker';
const store = createStore(reducer, compose(
applyMiddleware(thunk),
window.navigator.userAgent.includes('Chrome') ?
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() : compose,
),
);
ReactDOM.render(
<React.StrictMode>
<Router>
<Provider store={store}>
<App />
</Provider>
</Router>
</React.StrictMode>,
document.getElementById('root')
);
AdminPage.js
import { Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
const dataProvider = jsonServerProvider('http://localhost:3000');
const AdminPage = () => {
return (
<Admin dataProvider={dataProvider}>
<Resource name="services" />
</Admin>
)
}
export default AdminPage;
App.js
import React from 'react';
import './App.css';
import AdminPage from './components/AdminPage';
import { Switch, Route } from 'react-router-dom';
const App = () => {
return (
<div className="app">
<Switch>
<Route exact path='/manage' component={ AdminPage } />
</Switch>
</div>
);
}
export default App;
The proper way to write a reducer in this case is documented at https://marmelab.com/react-admin/CustomApp.html#using-an-existing-redux-provider.
But from what I see, you don't need one. You just added the thunk middleware, which is useless in react-admin as it already handles sagas.
I have plugged react router 4 into my react-create-app and upon running npm run test I get the following error:
Warning: Failed context type: The context `router` is marked as required in `Switch`, but its value is `undefined`.
in Switch (at App.js:17)
in main (at App.js:16)
in div (at App.js:15)
in App (at App.test.js:7)
I am using react-router#4.2.0, and react-router-dom#4.2.2
I have ensured my <Switch> component is nested within <BrowserRouter>.
App.js:
import React, { Component } from 'react';
import { Switch, Route, withRouter, Router } from 'react-router-dom';
import './App.css';
// Components
import Header from '../../components/header/Header';
import Nav from '../../components/nav/Nav';
import Dashboard from './../../containers/dashboard/Dashboard';
import Events from './../../containers/events/Events';
import NotFound from './../../containers/notfound/NotFound';
class App extends Component {
render() {
return (
<div className="App">
<Header />
<Nav />
<main id="main">
<Switch context="router">
<Route path="/" exact component={Dashboard} />
<Route path="/events" exact component={Events} />
<Route path="*" component={NotFound} />
</Switch>
</main>
</div>
);
}
}
export default App;
and my index.js
import ReactDOM from 'react-dom';
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import Store from './store';
import App from './containers/app/App';
import './index.css';
const StoreInstance = Store();
ReactDOM.render(
<Provider store={StoreInstance}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
Anybody else come across this?
It is default test example of Create React App.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
Router context is provided in the 'index.js' file and doesn't exist when you run the test.
You should rewrite it next way:
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
const StoreInstance = Store();
ReactDOM.render(
<Provider store={StoreInstance}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
div
);
});
or move 'Provider' and 'BrowserRouter into 'App' component.
I'm new to webpack, I'm starting to build an app using webpack and react 15, however it's like the export default is not working properly because I got an error as the App component is not found:
5:9 App not found in './components/App' import/named
Below the code of my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import {Router,Route,IndexRoute,browserHistory} from 'react-router';
import { Provider } from 'react-redux';
import {App} from './components/App';
import {HomePage} from './components/HomePage';
import configureStore from './store/configureStore.js';
import { syncHistoryWithStore } from 'react-router-redux';
const store = configureStore();
const history = syncHistoryWithStore(browserHistory, store);
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={HomePage}/>
</Route>
</Router>
</Provider>,
document.getElementById('app')
);
and the code of my App.js placed under components folder:
import React, { PropTypes } from 'react';
const App = (props) => {
return (
<div>
{props.children}
</div>
);
};
App.propTypes = {
children: PropTypes.element
};
export default App;
Can anyone see the problem? Looks like this type of export is not supported and I have to enable something?
Any help is appreciatted!!
Omit the curly braces:
import App from './components/App';
That's the trick with default, see.