react-router 位置不匹配任何路由答案

【问题标题】：react-router Location did not match any routesreact-router 位置不匹配任何路由
【发布时间】：2017-02-11 17:20:59
【问题描述】：

有一个登录组件。我的应用程序入口点是登录页面。成功登录后，移动到主页（仪表板和导航）。成功登录后，主页显示导航组件和仪表板。但导航不起作用。我收到错误：

react-router 位置“/examples”不匹配任何路由 react-router 位置“/dashboard”没有匹配任何路由

我的登录组件是

var React = require('react');
var {Link} = require('react-router');
var Dashboard = require('Dashboard');

var Login = React.createClass ({
onFormSubmit: function(e){
  e.preventDefault();
  window.location.href = '/main'
},
render: function(){
return (
<div>
 <h1 className="text-center">Login</h1>
  <form onSubmit={this.onFormSubmit}>
    <input type="text" ref="username"/>

    <button className="button">Login</button>
  </form>
</div>
 )
 } 
 });

 module.exports = Login;

我的仪表板组件是

 var React = require('react');
 var Nav = require('Nav');

 var Dashboard = (props) => {
  return (
    <div>
       <h1> Dashboard</h1>
    </div>
  </div>
  );
 }

 module.exports = Dashboard;

主组件Main.jsx

var React = require('react');
var Nav = require('Nav');

 var Main = (props) => {
   return (
     <div>
        <h1> Main</h1>
     <Nav/>
     <div className="row">
     <div className="columns medium-6 large-4 small-centered">
       {props.children}
     </div>
    </div>
   </div>
   );
  }

  module.exports = Main;

主 app.jsx 文件是

var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, browserHistory} = require('react-   router');
var Login = require('Login');
var Dashboard = require('Dashboard');
var About = require('About');
var Examples = require('Examples');
var Main = require('Main');


require('style!css!foundation-sites/dist/foundation.min.css')
$(document).foundation();

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={Login}/>
    <Route path="/main" component={Main}>
       <Route path="about" component={About}/>
       <Route path="examples" component={Examples}/>
       <IndexRoute component={Dashboard}/>
    </Route>
  </Router>,
  document.getElementById('app')
  );

我的 server.js 文件：

 var express = require('express');

 // Create our app
 var app = express();

 app.get(['/', '/main'], function(req, res){
 res.sendfile('./public/index.html')
});


app.use(express.static('public'));

app.listen(3000, function () {
  console.log('Express server is up on port 3000');
});

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

你这样声明你的应用程序路由：

<Route path="/main" component={Main}>
   <Route path="about" component={About}/>
   <Route path="examples" component={Examples}/>
   <IndexRoute component={Dashboard}/>
</Route>

所以你应该使用：

/main/examples
/main/dashboard

代替：

/examples
/dashboard

【讨论】：

我试过 /main/examples、/main/dashboard。还是不行
如果我的根路径有一个像“/main/:some_id”这样的uri参数怎么办？
我们面临同样的问题，只需添加 /main/ eqv。没有帮助。有人解决了吗？
好的，我们发现了我们的问题 - 应用程序菜单实际上仍在引用旧路径。 /main/:some_id 仍然是个问题。

【解决方案2】：

据我所知，您在登录时会路由到/main，这就是您的Dashboard 和Main 页面正常工作的原因。如果您想查看examples 页面，您需要重定向到/main/examples，如果是about，则需要重定向到/main/about。此外，您应该始终使用react-router API 进行重定向。查看this 答案，了解如何使用 react-router 以编程方式重定向

【讨论】：

【解决方案3】：

React Router v4 与 webpack 实现如下

import { BrowserRouter as Router, Route } from 'react-router-dom';

ReactDOM.render(
  <Router>
    <div>
      <Route exact path="/" render={() => <h1>main page</h1>} />
      <Route path="/about" render={() => <h1>about page</h1>} />
      <Route path="/contact" render={() => <h1>contact page</h1>} />
    </div>
  </Router>,
  document.getElementById('root'));
  
  //webpack  build  script change add --history-api-fallback in package.json file
  "scripts": {
    "start": "webpack-dev-server --history-api-fallback"
    }
    
   Now run following command on terminal: npm start

【讨论】：