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

Question

我正在尝试将网页重定向到其他组件，但我收到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>

错误： 地址：  

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

Answer 1

您需要使用完整路径并且不需要使用尾部斜杠，还需要设置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

Answer 2

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

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

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