Error: <Route> elements are for router configuration only and should not appear in react-router v4
Tried updating reactive router from 2 to 4 and broke it and now couldn't render my app.
the preparation of various errors (Finally <Route> elements are for router configuration only and should not be rendered
)
I also had an error where my route ./
displays fine, but every other route explodes when I update and saysCannot GET /randomRoute
I am creating a react app and my main index.js file (where I include ReactDOM.render) also includes routes and looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import { Route } from 'react-router';
import { BrowserRouter as Router, Match, HashRouter } from 'react-router-dom'
import Header from './components/header';
import './index.scss';
class App extends React.Component {
render() {
return (
<Router history={HashRouter}>
<div>
<Route path={"/"} component={Header} />
</div>
</Router>
);
}
}
ReactDOM.render(<App />,
document.getElementById('content'));
why should I be getting this current error and can anyone give me a simple start to the basics that I need to include just to get routing to work? it worked in version 2 but i wanted to upgrade and now cant get it to work again
source to share
The problem is that you are specifying the history object as the type of router.
From Documentation
A
<Router>
that uses the hash portion of the url (i.e. window.location.hash) to keep your interface in sync with the url.
This is similar to what you would do when you specify history as hashHistory in Router v2.
In addition, the history object has been split into a separate package from v4 onwards.
You can use BrowserRouter
or HashRouter
to display your routes.
Modify your route config below if you want to use BrowserRouter
which is <Router>
which uses the HTML5 history API (pushState, replaceState and popstate event) to keep your UI in sync with the URL. This is similar to what you would do when you specify the history as browserHistory in Router v2.
Also you need to import Route from "react-router-dom".
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Match, Route} from 'react-router-dom'
import Header from './components/header';
import './index.scss';
class App extends React.Component {
render() {
return (
<Router >
<div>
<Route path={"/"} component={Header} />
</div>
</Router>
);
}
}
source to share
Well, in the v4 response router the API is different. You must define it in your index.js file like this:
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<div>
<Switch>
<Route path="/path/one" component={ComponentOne} />
<Route path="/path/two" component={ComponentTwo} />
<Route path="/" component={IndexComponent} />
</Switch>
</div>
</BrowserRouter>
</Provider>
, document.querySelector('.container'));
Make sure order is important here. Finally, put the most common. Hope this helps. Happy coding!
source to share