BrowserRouter doesnt accept child routes passed as props - reactjs

Question

I am using react-router 4 with react-redux. but now I am not able to render any page. I am getting 404 while hitting URL. but console is not showing any error. may be I have colluded something with react-router version 3 but not able to get it what? one more thing here is that my one reducers is being called while store registration though I am not adding reducers in it.and more thing is IndexRoute deprecated in v4?
here is my config.js
import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware,compose } from 'redux'
import { Provider } from 'react-redux'
//import rootReducer from './reducers'
import createLogger from 'redux-logger'
import thunk from 'redux-thunk'
import {BrowserRouter} from 'react-router-dom'
import App from './containers/App'
import promise from "redux-promise-middleware"
import logger from "redux-logger"
import {fetchUsers} from "./action/UserAction"
import {fetchChart} from "./action/ChartAction"
import {fetchNames} from "./action/SearchAction"
import reducer from "./reducers"
import routes from "./routes"
const middleware = applyMiddleware(promise(), thunk, logger())
//const store= createStore(reducer,middleware)
const store= createStore(middleware)
//store.dispatch(fetchUsers());
//store.dispatch(fetchChart());
render(
<Provider store={store}>
<BrowserRouter routes={routes} />
</Provider>,
document.getElementById('root')
)
my routes.js
import App from "./pages/App"
import Users from "./pages/Users"
import Charts from "./pages/Charts"
import React from "react"
import { Route } from "react-router-dom"
export default (
<Route path="/" component={App}>
{/* <IndexRoute component={Users} /> */}
<Route path="/" component={Users}/>
<Route path="charts" name="charts" component={Charts}/>
</Route>
);
my App.js
import {Link} from "react-router"
const App = () =>(
<div>
<h1> this is main page </h1>
<Link to="charts">charts</Link>
</div>
)
export default App
my charts.js
const Chart = () => (
<h1> this is chart </h1>
)
export default Chart
my Users.js
const User = () =>(
<div>
<h1> this is user </h1>
</div>
)
export default User
and reducer is that is being called
import _intialState from "../api/names.js"
const intialValues = {names:['x','y','z','a','b','c','d','e','f'],
searchText:''}
export default function reducer(
state=intialValues,
action){
console.log("search reducer",state)
switch(action.type){
case "SEARCH":{
return Object.assign({},state,{searchText:action.payload})
}
default:
return state;
}
}

Answer 1

As per the react-router documentation, there is no props called routes to BrowserRouter
Instead you can specify the routes to BrowserRouter as children.
children: node
A single child element to render.
Use it like
<BrowserRouter >
{routes}
</BrowserRouter>