0
329
VisualizaçõesThe prop `history` is marked as required in `Router`, but its value is `undefined`. in Router
I am new to ReactJs. This is my code:
var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Main = require('Main');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Main}></Route>
</Router>, document.getElementById('app'));
and compiling it with webpack. Also I added Main component to my aliases.
The console throws these errors:
I also read these links :
React Router failed prop 'history', is undefined
How do I resolve history is marked required, when value is undefined?
Upgrading React-Router and replacing hashHistory with browserHistory
and many searches around the web, but I couldn't fix this issue. React Router is version 4
3 Respostas
Responde à pergunta0
If you are using react-router v4 you need to install react-router-dom as well. After that, import BrowserRouter from react-router-dom and switch Router for BrowserRouter. It seems that v4 change several things. Also, the react-router documentation is outdated. This is my working code:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom'
import App from './components/App';
ReactDOM.render((
<BrowserRouter>
<Route path="/" component={App}/>
</BrowserRouter>
),
document.getElementById('root')
);
0
Which version of React Router are you using? Router version 4 changed from passing in the browserHistory class to passing an instance of browserHistory, see the code example in the new docs.
This has been catching lots people who automatically upgrade; a migration document will be out 'any day now'.
You want to add this to the top:
import { createBrowserHistory } from 'history'
const newHistory = createBrowserHistory();
and
<Router history={newHistory}/>
0
If you want to have multiple routes you can use switch like this,
import {Switch} from 'react-router';
then
<BrowserRouter>
<Switch>
<Route exact path="/" component={TodoComponent} />
<Route path="/about" component={About} />
</Switch>
</BrowserRouter>