I'm building an app with a sidebar. Originally, that sidebar was static (no problem), but now I want it to dynamically update based on the route using React Router.
It's very similar to the sidebar example provided as part of the documentation, so I set about retrofitting the sidebar example to my existing app.
Here's router code passing the route a single component:
import React from 'react';
import ReactRouter from "react-router";
import {Router} from 'react-router';
import {Route} from 'react-router';
import Main from "./Main"
import ItemPanel from "../views/ItemPanel"
var routes = (
<Router>
<Route path="/" component={Main}>
<Route path=":category" component={ItemPanel}/>
</Route>
</Router>
);
This works, in the sense that it doesn't throw an error; however, to make the app work as it does in the example (this line in particular), we need to give it a prop of components (instead of component) so that Main has access to this.props.itemPanel. So, substituting the :category path for:
<Route path=":category" components={{itemPanel: ItemPanel}}/>
and I get an error:
Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
Obviously it getting undefined is a problem, but I can't work
I don't think that the problem is in my ItemPanel code as I've tried swapping out ItemPanel for Test, where Test is the most basic possible React component. Same problem.
If it makes any difference, this is an isomorphic app and the error happens both on the client and on the server when trying to show this route.
Originally I thought that it might be a problem of mixing ES5 and ES6 syntax, but I've tried rewriting ItemPanel in ES6 and have the exact same problem. Other parts of my application still use ES5, but I can't see how that would be an issue here if they're not imported directly.
Thanks in advance!
I have always seen this error when I do not correctly import my ES6 dependencies. I cannot see the import but have you tried importing it using a spread function like so: import { Main } from './Main' or make sure that you export main like so: export default Main;
Related
I am a junior in my advanced front web development class and we just started learn react. I am fairly new to React and struggling with this error. I am building an e-commerce website for my final project and I am using #moltin/sdk with React and Redux through create-react-app so I dont have the webpack config. My codes complied successfully, however, I am getting this error:
Blockquote Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
I am not sure what is it wrong. I checked all my components and have export default for each of them in their own respective file since export default is limited to one per document. Any help would be greatly appreciated, I have included by index.js file which where the issues is coming from according to the error and the error message.
Error Message Picture
import React from 'react';
import {render} from 'react-dom';
import './index.css';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import App from '../src/component/App.js';
import store, { history } from './store';
const target = document.getElementById('root');
render(
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<App />
</div>
</ConnectedRouter>
</Provider>, target
);
This is on React ^16.13.1, react-redux ^7.2.0, and redux ^4.0.5. Thank you again!
import { ConnectedRouter } from 'connected-react-router'
This is the actual import for Connected Router. connected-react-router is the library used for Redux binding for React Router. Install this package with the below command.
npm install --save connected-react-router
I have gone through several similar questions but could not find something that worked. I am trying to bring in BrowserRouter from react-router but it says:
Module '"../node_modules/#types/react-router"' has no exported member 'BrowserRouter'
as per another similar question on here, I did an npm install of #types/react and #types/react-router but saved as dev dependencies. they were already in my package.json but as regular dependencies. before this, they were giving a similar issue when doing import React from 'react'. It would say that those modules could not be found, same for router. then when i did the install, those errors went away but the BrowserRouter started showing this error. I did also try 'react-router-dom'.
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router';
import './App.css';
import Recipes from './components/Recipes';
const App: React.SFC = () => {
return (
<BrowserRouter>
<main>
<Switch>
<Route exact path='/' component={Recipes} />
</Switch>
</main>
</BrowserRouter>
);
}
export default App;
Just expecting for the error to not be present and to be able to regularly navigate. This is my first time really using typescript.
According to the documentation of React Router, BrowserRouter gets imported from 'react-router-dom', not 'react-router'.
Here is the example code given in the link above.
import { BrowserRouter } from 'react-router-dom'
<BrowserRouter
basename={optionalString}
forceRefresh={optionalBool}
getUserConfirmation={optionalFunc}
keyLength={optionalNumber}
>
<App/>
</BrowserRouter>
Here is a SO question about the difference between react-router and react-router-dom and the accepted answer contains the following.
react-router contains all the common components between react-router-dom and react-router-native. When should you use one over the other? If you're on the web then react-router-dom should have everything you need as it also exports the common components you'll need. If you're using React Native, react-router-native should have everything you need for the same reason. So you'll probably never have to import anything directly from react-router.
I did also try 'react-router-dom'.
It should work, e.g. this code
import { BrowserRouter, Route, Switch } from "react-router-dom";
works.
Both react-dom and react-router-dom packages should be installed. That means both can be found in the dependencies section of package.json file. Working sample project using Typescript can be found here.
I have a very basic react app I'm creating using create-react-app currently, and this is the code:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router';
import createBrowserHistory from 'history/createBrowserHistory';
import App from './App/AppComponent';
const browserHistory = createBrowserHistory();
ReactDOM.render(
<Router path="/" history={browserHistory}>
<div>
<Route path="/" component={App} />
</div>
</Router>, document.getElementById('root')
);
AppComponent.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>This is the App component</div>
);
}
}
export default App;
And I get the following warning in the console when I run this app:
bundle.js:11888 Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
When I remove the react-router related stuff, I don't seem to get the console warning so my guess is it's coming from that package... but I've used it in another small app previously and didn't have the error so I'm a bit confused.
What am I missing here?
This is a recent change (2 days ago) that React made in React v15.5. The change was that PropTypes are no longer included in React itself and instead are there own package (prop-types). This means that any library that is using React.PropTypes, which are most of them, are now showing this warning. An issue has already been filed with React Router specifically and a few pull requests have also been submitted. I imagine this will be fixed within the next 24-48 hours. So for now, just ignore it. There's nothing actually wrong with your code.
About four days ago, I created a project with react-router. I installed everything as normal, following this guide. I then installed react-router via the recommended method in the official Github readme. For some odd reason, it wouldn't render any of my components until I moved the route to my index.js file in my root directory, where it began to work. Before, the route was located inside of my app.jsx file.
Today, I decided that I wanted to create a small portfolio site for myself, since I feel like I'm understanding the basics of React. I installed everything like I did before, w/ versions 3.0.0 and 15.3.2 of react-router and react / react-dom respectively. The versions have not changed since my last project a few days back. However, it seems like react-router is no longer working for some reason, showing no errors in my console, and I've spent hours now searching Google and Stack Overflow for solutions. My code is super bare-bones currently, with my index.js file looking like the following, without the use of react-router:
import React from 'react'
import {render} from 'react-dom'
class App extends React.Component {
render() {
return <div>{this.props.children}</div>;
}
}
const Home = () =>
<p>Hello</p>;
render(
<App><Home /></App>,
document.getElementById('main'))
I understand that I should be moving towards more functional programming, but for the time being I have App written as a class, for testing reasons. Now, why would the above code work correctly, but the code snippet below will not produce any results?
import React from 'react'
import {render} from 'react-dom'
import {Router, Route, IndexRoute, hashHistory} from 'react-router'
class App extends React.Component {
render() {
return <div>{this.props.children}</div>;
}
}
const Home = () =>
<p>Hello</p>;
render(
(<Router history="hashHistory">
<Route path="/" component={App}>
<IndexRoute component={Home} />
</Route>
</Router>),
document.getElementById('main'))
I really do not think I'm misunderstanding react-router in any way. I've tried wrapping the route in (), as I've seen in some tutorials, but that didn't make a difference -- obviously.
Is there something wrong with my code? or could it be something else? If there is any more information I can provide for you guys, let me know. I can take some screen shots or something, if that would help any of you out.
I think you should change
<Router history="hashHistory">
to
<Router history={hashHistory}>
Router is expecting history to be an objetct, not string:
var Router = _react2.default.createClass({
displayName: 'Router',
propTypes: {
history: object
(...)
});
I am using react router for my single page application routing. I got multiple components which will change based on user events like click.
Now the problem is, for the IndexRoute my routing works fine, but for the subsequent route it breaks. As per my analysis react-router perfectly renders the second component but ReactDOM.render method adds '#' to url after successful rendering. It confuses react-router and makes it to render the default route.
Can anyone help me to resolve this issue?
NOTE: I am wondering why ReactDOM.render adds empty '#' to url
It is likely that you have not enabled the 'browserHistory' feature provided by React-Router (last I checked, it defaulted to 'hashHistory').
Try adding this to the main (clientside entrypoint to your React app) file:
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'
import routes from './routes'
/* The rest of your other code... */
render(
<Router history={browserHistory} routes={routes} />,
document.getElementById('app')
)
And see if you still get that issue.