javascript - React Router将所有请求重定向到 "/"

Question

每当我尝试浏览像“/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')
         );

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

React Router always redirect me to a different url

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

Answer 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')
);