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

Question

我正在尝试将页面重定向到不同的组件，但出现did not match any route 错误。

React 路由器版本：

 "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

我通过在调查详细信息前添加一个“/”解决了这个问题。像这样。

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

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