Why my project show Index of folder when build, but when it running, it works
My Index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./reducers";
import { HashRouter } from "react-router-dom";
import App from "./App";
import "./index.css";
import createBrowserHistory from "history/createBrowserHistory";
const store = createStore(rootReducer);
const history = createBrowserHistory();
ReactDOM.render(
<Provider store={store}>
<HashRouter history={history}>
<App />
</HashRouter>
</Provider>,
document.getElementById("root")
);
My App.js
import React, { Component } from "react";
export default class App extends Component {
render() {
return (
<div>
<h1>ABC</h1>
</div>
);
}
}
When i call my index.html and my bundle.js after build
Related
I'm trying to configure the react router dom route structure, but apparently my routes are not being recognized within the application
routes/index.tsx
import React from 'react';
import { inject, observer } from 'mobx-react';
import { Routes, Route, Link } from "react-router-dom";
import {
Main,
} from '../scenes';
import { Routes as RoutesPath } from './routing';
const RoutesContainer: React.FC = () => (
<Routes>
<Route path={RoutesPath.MAIN} element={<Main />} />
</Routes>
);
export { Routes };
export default inject('routing')(observer(RoutesContainer));
index.tsx (aplication)
import React from 'react'
import { Provider } from 'mobx-react';
import { render } from 'react-dom'
import './index.css'
import store from './stores';
import { Routes } from './routes';
import { BrowserRouter } from 'react-router-dom';
render(
<Provider rootStore={store}>
<BrowserRouter>
<React.StrictMode>
<Routes />
</React.StrictMode>
</BrowserRouter>
</Provider>,
document.getElementById('root')
)
If I remove my component, and add some text it displays correctly, but with the component it displays a blank screen.
I have searched so many but could'nt find answer on this bug please can you help.
_redux_redux_store__WEBPACK_IMPORTED_MODULE_2___default.a.getState is not a function
This is my redux store
import {combineReducers, createStore} from "redux";
import profileReducer from "./profile-reduce";
import dialogsReducer from "./dialogs-reduce";
import sidebarReducer from "./sidebar-reduce";
let reducers = combineReducers({
profilePage: profileReducer,
dialogsPage:dialogsReducer,
sidebar: sidebarReducer
});
let store = createStore(reducers);
export default store;
This is index.js
import React from 'react';
import * as serviceWorker from './serviceWorker';
import store from "./redux/redux-store"
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";
let rerenderEntireTree = (state)=> {
ReactDOM.render(
<BrowserRouter>
<App state={state} dispatch={store.dispatch.bind(store)} store={store}/>
</BrowserRouter> ,document.getElementById('root'));
}
rerenderEntireTree(store.getState());
store.subscribe(()=>{
let state = store.getState();
rerenderEntireTree(state);
});
serviceWorker.unregister();
In your index.js try doing this
import React from 'react';
import * as serviceWorker from './serviceWorker';
import store from "./redux/redux-store"
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";
import { Provider } from 'react-redux';
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
So I have done it by myself, the problem was in naming files. So needed to name my redux-store to redux-store.jsx and it worked.
I have wrapped my index.js file to support a Redux Store and React-Router-v4.
However, when I try to run a basic test, I get the following error message:
Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
Here is what my index.js looks like:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';
// Redux
import { Provider } from 'react-redux';
import store from "./store/index";
ReactDOM.render((
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
), document.getElementById('root'));
registerServiceWorker();
and here is my App.js:
import React, { Component } from 'react';
import { ScaleLoader } from 'react-spinners';
import { withRouter } from 'react-router';
import Header from './components/Header';
import Footer from './components/Footer';
import Main from './Main';
import './styles/styles.scss';
// Redux
import { connect } from 'react-redux';
import store from "./store/index";
import { isLoading } from "./actions/index";
class App extends Component {
constructor() {
super();
store.dispatch(isLoading(true));
}
componentDidUpdate(prevProps) {
if (this.props.location.pathname !== prevProps.location.pathname) {
store.dispatch(isLoading(true));
}
}
render() {
return (
<div className='App'>
<Header />
<div className='App__wrapper'>
<div className={'loading-spinner ' + (this.props.isLoading ? null : '--hide-loader')}>
<ScaleLoader
color={'#123abc'}
loading={this.props.isLoading}
/>
</div>
<Main />
</div>
<Footer />
</div>
);
}
}
const mapStateToProps = (state) => ({ isLoading: state.isLoading });
export default withRouter(connect(mapStateToProps)(App));
Since I'm using withRouter to wrap for navigation, is this method discouraged? Should I be setting up withRouter at the index.js level?
Thank you!
Try importing your BrowserRouter like this:
import { BrowserRouter as Router } from 'react-router-dom'
Then replace everywhere it appears BrowserRouter with Router instead.
I have a very simple project and react router dom is not rendering components. Sometimes it renders the component for first route but then it doesn't render.
Here's the code for App.js:
import React, { Component } from 'react';
import { Provider } from "react-redux";
import {
BrowserRouter as Router,
Route
} from "react-router-dom";
import store from "./store";
import createHistory from 'history/createBrowserHistory';
import { IntroJm } from './components/intro/jm';
import { IntroNfc } from './components/intro/nfc';
import { IntroTxn } from './components/intro/txn';
import './assets/sass/main.scss';
import './static/css/main.scss';
import './static/css/pure.min.scss';
import './App.scss';
let browserHistory = createHistory();
class App extends Component {
componentDidMount() {
browserHistory.push("/intro/jm");
}
render() {
return (
<Provider store={store}>
<div>
<Router>
<div>
<Route path="/intro/jm" component={IntroJm} />
<Route path="/intro/nfc" component={IntroNfc} />
<Route path="/intro/txn" component={IntroTxn} />
</div>
</Router>
</div>
</Provider>
);
}
}
export default App;
All the route components are simple component with a span tag only.
Please help
You can try wrapping your component with WithRouter and then changing the route with this.props.history.push()
Try
import React, { Component } from 'react';
import { Provider } from "react-redux";
import {
BrowserRouter as Router,
Route
} from "react-router-dom";
import {withRouter} 'react-router';
import store from "./store";
import { IntroJm } from './components/intro/jm';
import { IntroNfc } from './components/intro/nfc';
import { IntroTxn } from './components/intro/txn';
import './assets/sass/main.scss';
import './static/css/main.scss';
import './static/css/pure.min.scss';
import './App.scss';
let browserHistory = createHistory();
class App extends Component {
componentDidMount() {
this.props.history.push("/intro/jm");
}
render() {
return (
<Provider store={store}>
<div>
<Router>
<div>
<Route path="/intro/jm" component={IntroJm} />
<Route path="/intro/nfc" component={IntroNfc} />
<Route path="/intro/txn" component={IntroTxn} />
</div>
</Router>
</div>
</Provider>
);
}
}
export default withRouter(App);
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.