BrowserRouter 不接受作为 props 传递的子路由

Question

我正在使用带有 react-redux 的 react-router 4。但现在我无法呈现任何页面。我在点击 URL 时收到 404。但控制台没有显示任何错误。可能是我与 react-router 版本 3 勾结了一些东西但无法得到它是什么？这里还有一件事是我的一个减速器在商店注册时被调用，尽管我没有在 it.and 中添加减速器更多的是 IndexRoute 在 v4 中被弃用了吗？

这是我的 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')
)

我的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>
);

我的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

我的charts.js

const Chart = () => (
    <h1> this is chart </h1>
)

export default Chart

我的Users.js

const User = () =>(
    <div>
    <h1> this is user </h1>
    </div>
)

export default User

reducer 被调用

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

根据react-router documentation，没有道具叫做routes到BrowserRouter

相反，您可以将 BrowserRouter 的路由指定为子级。

children: node

A single child element to render.

像

一样使用它

<BrowserRouter >
    {routes}
</BrowserRouter>

BrowserRouter 不接受作为 props 传递的子路由

BrowserRouter doesnt accept child routes passed as props

reactjs

react-redux

react-router-v4