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

Question

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

反应路由器版本：

 "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元素：

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

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

react router did not match any routes

javascript

url-routing

reactjs

react-router

react-router-redux