React Router Params不工作

时间:2017-05-30 14:03:39

标签: reactjs react-router react-redux

我正在尝试在我的react redux应用程序中使用params,但不幸的是它无效。我得到一个空白的屏幕。这是我正在关注的代码

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, browserHistory} from 'react-router';
import thunk from 'redux-thunk';
import rootReducer from './rootReducer';
import { createStore, applyMiddleware, compose } from 'redux';

 const store = createStore(
 rootReducer,
 compose(
   applyMiddleware(thunk),
   window.devToolsExtension ? window.devToolsExtension() : f => f
 )
);
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory}>
  <Route path="/" component={Login}/>
  <Route path="/lists" component={requireAuth(Dashboard)}/>
  {/* Parameter route*/}
  <Route path="/record/:mEID" component={requireAuth(Record)}/>
</Router>
</Provider>,
document.getElementById('root')
);

当我转到我的localhost网址,即localhost:3000 / record / 16655时,我收到这样的错误&#34;找不到http://localhost:3000/record/index.js&#34;。

这可能是什么解决方案???

这是我的package.json供参考

 "lodash": "^4.17.4",
 "prop-types": "^15.5.10",
"react": "^15.1.0",
"react-bootstrap": "^0.31.0",
"react-bootstrap-table": "^3.3.7",
"react-dom": "^15.1.0",
"react-fontawesome": "^1.6.1",
"react-redux": "^4.4.5",
"react-router": "^3.0.2",
"redux": "^3.5.2",
"redux-thunk": "^2.1.0",

1 个答案:

答案 0 :(得分:0)

尝试嵌套您的路线

...

<Route path='/record' ...>
  <Route path='/:meid' ../>
</Route>

基于React-router tutorial#nested-routes

<App>       {/*  /          */}
  <Repos>   {/*  /repos     */}
    <Repo/> {/*  /repos/123 */}
  </Repos>
</App>