反应路由器与任何路由都不匹配

时间:2017-05-26 20:33:33

标签: javascript reactjs react-router url-routing react-router-redux

我正在尝试将网页重定向到其他组件,但我收到did not match any route错误。

React Router Version:

 "react-router": "2.4.0",
 "react-router-redux": "4.0.4",

Webpack.config文件:输出:

 output: {
    path: __dirname + '/dist',
    publicPath: '/SurveyMaintenance/',
    filename: 'bundle.js'
  }

应用开始:

import {Router, browserHistory} from 'react-router';
import routes from './routes';

   <Provider store={store}>
        <Router history={browserHistory} routes={routes} />
    </Provider>,
    document.getElementById('app')
);

我的Route.js文件:

<Route path="SurveyMaintenance/" component={App}>
        <IndexRoute component={SurveyMaintenancePage}/>
        <Route path="surveydetail/:id" component={EditSurveyPage} />
    </Route>

链接元素:

<Link to={`surveydetail/${survey.Id}`} onClick={editSurvey}></Link>

错误:enter image description here 地址:  enter image description here

地址看起来是正确的,但是当显然有一个分配给该地址的组件时,它仍然会抛出此错误。 我一定是做错了。

2 个答案:

答案 0 :(得分:0)

您需要使用完整路径并且不需要使用尾部斜杠,还需要设置publicPath: '/'

<Route path="SurveyMaintenance" component={App}>
            <IndexRoute component={SurveyMaintenancePage}/>
            <Route path="surveydetail/:id" component={EditSurveyPage} />
        </Route>

-

<Link to={`/SurveyMaintenance/surveydetail/${survey.Id}`} onClick={editSurvey}></Link>

如果您想使用publicPath,则需要为此历史记录添加基本名称 How to configure a basename in React Router 3.x

答案 1 :(得分:0)

我通过在surveydetail之前添加'/'解决了这个问题。像这样。

<Route path="SurveyMaintenance" component={App}>
            <IndexRoute component={SurveyMaintenancePage}/>
            <Route path="/surveydetail/:id" component={EditSurveyPage} />
        </Route>

<Link to={`surveydetail/${survey.Id}`} onClick={editSurvey}></Link>