I receive an error.
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined
I am trying ti use riutes from import in Index.js
import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
import { HashRouter as Router, Route, IndexRoute } from 'react-router-dom';
const renderApp = (appRoutes) => {
ReactDom.render(appRoutes, document.getElementById('app'));
};
renderApp( routes() );
I export this routes from routes.js
import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { BrowserRouter as Router, Route, browserHistory, IndexRoute } from 'react-router-dom';
import App from './components/App';
const routes = () => (
<AppContainer>
<Router history={browserHistory} component={App}>
</Router>
</AppContainer>
);
export default routes;
You probably want to call routes:
renderApp( routes() );
Related
I currently have a react app I am working on and the routing is buggy. I have set up react applications and their routings like this before but when trying to route to the "details" component, only the url changes, but the component does not load. An extra pair of eyes would be nice to see what I'm missing. I have the routes set up as:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Router } from "react-router-dom";
import { createBrowserHistory } from "history";
const history = createBrowserHistory();
const render = () => {
ReactDOM.render(
<Router history={history}>
<App />
</Router>,
document.getElementById('root'),
);
};
render();
App.js:
import React from 'react';
import {Route, Switch} from 'react-router-dom';
import { BreweryPage } from './route.js';
function App() {
return (
<>
<Switch>
<Route exact path="/" component={BreweryPage}/>
</Switch>
</>
);
}
export default App;
route.js
import React from 'react';
import PropTypes from 'prop-types';
import { Route, Switch, withRouter } from 'react-router-dom';
import { BreweryPage, BreweryDetailPage } from './pages';
import {AppContainer} from "../../common/header";
const BreweryHomePage = ({ match }) => (
<AppContainer>
<Switch>
<Route exact path={`${match.url}`} component={BreweryPage} />
<Route exact path={`${match.url}/details/:breweryid`} component={BreweryDetailPage} />
</Switch>
</AppContainer>
);
BreweryHomePage.propTypes = {
match: PropTypes.shape({
url: PropTypes.string,
}),
};
BreweryHomePage.defaultProps = {
match: {
url: '',
},
};
export default withRouter(BreweryHomePage);
The root "/" path component loads, but I can't get the details components component to render when routing with history.push(path) using const history = useHistory();.
do it like this
1-index.js should like this:
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { BrowserRouter } from "react-router-dom"
const app = (
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
<React.StrictMode/>
)
ReactDOM.render(app, document.getElementById("root"))
you have to add BrowserRouter to be able to use navigation
2- you can use BreweryPage in App.js like this:
import React from 'react';
import {Route, Switch} from 'react-router-dom';
import { BreweryPage } from './route.js';
function App() {
return (
<>
<BreweryPage/>
</>
);
}
export default App;
3- route.js
import React from 'react';
import PropTypes from 'prop-types';
import { Route, Switch, withRouter } from 'react-router-dom';
import { BreweryPage, BreweryDetailPage } from './pages';
import { createBrowserHistory } from "history";
import {AppContainer} from "../../common/header";
const newHistory = createBrowserHistory();
const BreweryHomePage = (props) => (
<Router history={newHistory}>
<Switch>
<Route exact path="/" component={BreweryPage} />
<Route path="/details/:breweryid" component={BreweryDetailPage} />
</Switch>
</Router>
);
export default withRouter(BreweryHomePage);
Why is this showing? I am using ReacJS and I can not see what is wrong.
My history.js:
import { createBrowserHistory } from 'history'
export default createBrowserHistory
My App.js:
import React from 'react'
import { Router } from 'react-router-dom'
import Routes from './routes'
import history from './history'
import './styles/global.scss'
function App() {
return (
<div className="App">
<Router history={history}>
<Routes/>
</Router>
</div>
);
}
export default App;
You need to invoke createBrowserHistory and then export it. Try changing the line to:
export default createBrowserHistory();
This is the proper way to import Router component,the root router component which takes history as a prop.
import { BrowserRouter as Router } from "react-router-dom";
and as Sajib Khan said, you should also call the createBrowserHistory then use it as history prop.
In my site.js file i import the store from index.ts
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import App from '../components/site/App'
import {store} from '../components/site/src/app-config/index.ts'
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App/>
</BrowserRouter>
</Provider>, document.getElementById('root'))
export const store = createStore(rootReducer(history), applyMiddleware(thunk))
I got problem in the browser console:
browser.js:34 Uncaught Invariant Violation: You must pass a component
to the function returned by connect. Instead received {}
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: object. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
Check the render method of App.
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
registerServiceWorker();
//App.js
import React, { Component } from 'react'; //import logo from
'./logo.svg'; import './App.css';
import HeaderComponent from
'./Components/HeaderComponent/HeaderComponent';
import FooterComponent from './Components/FooterComponent/FooterComponent';
import Main from './Components/Main/Main';
const App = () => {
return(
<div>
<HeaderComponent />
<Main />
<FooterComponent />
</div> ) }
export default App;
I think the error is very clear, one of your imports is not importing a valid react component.
To fix this, make sure all your imports are exporting a react component, either a class or a function for stateless components.
you might have something like the following for each component.
export default HeaderComponent extends Component { ... }
export default Main extends Component { ... }
export default FooterComponent extends Component { ... }
Currently my URL structure is still storing history in hash syntax.
Ex: http://localhost:3000/#/work?_k=otstr8
Im trying to have it use browserHistory from react-router to be displayed as:
http://localhost:3000/#/work
Here is my routes.js file:
//Import Dependencies.
import React from 'react';
import { Router, Route } from 'react-router'
import ReactDOM from 'react-dom';
//Import Components.
import AboutElement from '../views/about/about.jsx';
import WorkElement from '../views/work/work.jsx';
import ResumeElement from '../views/resume/resume.jsx';
//Set up routes.
let routes = (
<Router>
<Route path='/' component={AboutElement}/>
<Route path='/work' component={WorkElement}/>
<Route path='/resume' component={ResumeElement}/>
</Router>
);
export default routes;
My index.js file:
//Import Dependencies.
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';
//Import Routes.
import routes from './routes/routes.js';
ReactDOM.render(<Router history={browserHistory} routes={routes} />, document.getElementById('application'))
From what I have researched this syntax is correct for browserHistory? For some reason hash history is still being used. Any ideas why this is still happening?
Just install history as a seperate library and use this.
import { createHistory } from 'history'
const history = createHistory()
Just created my own variable for browserHistory.
//Import Dependencies.
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
const browserHistory = createBrowserHistory();
//Import Routes.
import routes from './routes/routes.js';
ReactDOM.render(<Router history={browserHistory} routes={routes} />, document.getElementById('application'));
The syntax for the url is now:
localhost:3000/
localhost:3000/work
localhost:3000/resume
Which is great!