React Router 将所有请求重定向到“/”答案

【问题标题】：React Router redirects all requests to "/"React Router 将所有请求重定向到“/”
【发布时间】：2017-12-19 17:05:57
【问题描述】：

每当我尝试浏览像“/about”这样的路径时，在浏览器中会是这样的：“http://localhost:3000/#/about”。我有我的主页。 React Router 不会将我引导到想要的路径。

我使用 React Router v4。

这是我的 App.jsx 文件：

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router-dom').BrowserRouter;
var {Route,Link, hashHistory, Switch} = require('react-router-dom');

var Main = require('Main');
var Weather = require('Weather');
var About = require('About');
var Examples = require('Examples');



 ReactDOM.render(
   <Router>
     <div>

          <Route exact path="/about" component={About} />
          <Route exact path="/examples" component={Examples} />
          <Route exact path= "/" component={Main} />
    </div>
   </Router>
        ,document.getElementById('app')
         );

这 2 个解决方案不起作用： React Router Default Route Redirect to /home

React Router always redirect me to a different url

还有一个问题：哪个版本的 React Router 更好用？由于简单，我认为 v3 比 v4 更好。

【问题讨论】：

尝试通过HashRouter更改路由器
@HenriqueOeckslerBertoldi 非常感谢。它有效。
我在下面正确回答了：D。只是为了案例哈哈。

标签： javascript reactjs react-router babeljs

【解决方案1】：

您正在使用哈希路由器（正如我在您的网址中看到的那样）。所以你必须使用HashRouter而不是Router。

    var React = require('react');
    var ReactDOM = require('react-dom');
    var {HashRouter, Route,Link, hashHistory, Switch} = require('react-router-dom');

    var Main = require('Main');
    var Weather = require('Weather');
    var About = require('About');
    var Examples = require('Examples');



    ReactDOM.render(
       <HashRouter>
         <div>
            <Route exact path="/about" component={About} />
            <Route exact path="/examples" component={Examples} />
            <Route exact path= "/" component={Main} />
        </div>
       </HashRouter>
    ,document.getElementById('app')
);

【讨论】：

我将答案标记更改为您的答案，因为答案更完整，而且由于您对我的问题的评论，答案也更快。

【解决方案2】：

现在，您似乎使用了错误的路由器。您想使用HashRouter，但您使用的是BrowserRouter。尝试像这样更新您的导入。

var React = require('react');
var ReactDOM = require('react-dom');
var { Route, Link, HashRouter as Router, Switch } = require('react-router-dom');

【讨论】：

谢谢，它有效。我对它的第 4 版很陌生。 HashRouter 与 BrowserRouter 有什么区别？
HashRouter 通过 HTML5 之前的导航 API 进行导航。它将散列放入 URL 并根据散列之后的内容进行导航。 BrowserRouter 使用 HTML5 API 和 pushes 将新位置添加到访问地点列表中。上面的问题是你想去/about，因为那是散列之后的内容。但是，BrowserRouter 正在像往常一样阅读它。所以它在/ 看到了回家路线，最后是/about。

【解决方案3】：

用<Switch> 组件包裹你的路由。

【讨论】：