React Router总是将我重定向到其他网址 [英] React Router always redirect me to a different url
问题描述
我是React和React Router的新手.我正在使用React Router v4，并遵循基于先前版本的教程-但我做到了(使用SO上的某些内容以及React Router v4文档上的某些内容).
I'm new to React and React Router. I'm using React Router v4 and following a tutorial based on previous versions - but I made it work (using some stuff found on SO and some stuff on the react router v4 docs).
尽管有一件事困扰着我.
There is one thing though that is bothering me.
我有一个网址 http://localhost:3000/#/bugs ，该网址基本上已加载我所有错误的清单.但是我也有可能的网址，例如 http://localhost:3000/#/bugs ?priority = low& status = open 会加载一组特定的网址.
I have a url http://localhost:3000/#/bugs, which basically loads a list of all my bugs. But I also have possible urls like http://localhost:3000/#/bugs?priority=low&status=open which loads a specific set of urls.
网址本身可以正常工作，并且可以按预期完成工作.
The urls themselves work and do the job as expected.
最棘手的事情是，每当我输入 http://localhost:3000 /#/bugs?priority = low& status = open (或任何参数)，则该组件执行其工作，但URL地址栏显示 http://localhost:3000/#/bugs (尽管渲染显示了与显示的优先级和状态有关的所有内容).
The werid thing is that whenever I type http://localhost:3000/#/bugs?priority=low&status=open (or any params), the component do their jobs but the URL address bar shows http://localhost:3000/#/bugs (although the rendering shows everything related to priority and status shown).
不知何故，URL位置栏已更改，但我不明白为什么.
Somehow, the URL location bar is changed but I don't understand why.
这是我的App.js
Here is my App.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BugList} from './BugList';
import {Redirect} from 'react-router';
import {HashRouter as Router, Route} from 'react-router-dom';
const NoMatch = React.createClass({
render : function (){
return(
<h2>This path does not exist</h2>
);
}
});
ReactDOM.render(
(
<Router>
<div>
<Route path='/bugs' component={BugList}/>
<Route path='/bugs/priority/:priority' component={BugList}/>
<Redirect from='/' to="/bugs" />
<Route path="*" component={NoMatch} />
</div>
</Router>
),
document.getElementById('main')
);
谢谢.
编辑4月12日.尽管下面某人提供了宝贵的帮助，但这仍然没有解决.我尝试在路由器中使用Switch，但它根本不起作用(未显示任何内容).所以问题仍然在发生，这是我的App.js的当前状态，使用react-15.5.3，react-dom-15.5.3，react-router-4.0.0和react-router-dom-4.0. 0 ....
EDIT 12th of April. Despite of the precious help of someone below, this is still not solved. I tried using Switch inside a Router but it doesn't work at all (nothing is shown). So the problem is still happening, and this is the current state of my App.js, using react-15.5.3, react-dom-15.5.3, react-router-4.0.0 and react-router-dom-4.0.0....
import React from 'react';
import ReactDOM from 'react-dom';
import {BugList} from './BugList';
import BugEdit from './BugEdit';
import {Redirect} from 'react-router';
import {HashRouter as Router, Route} from 'react-router-dom';
const NoMatch = React.createClass({
render : function (){
return(
<h2>This path does not exist</h2>
);
}
});
ReactDOM.render(
(
<Router>
<div>
<Redirect from='/' to="/bugs" />
<Route path='/bugs' component={BugList}/>
<Route path='/bug/:id' component={BugEdit}/>
<Route path="*" component={NoMatch} />
</div>
</Router>
),
document.getElementById('main')
);
推荐答案
以Bartek所说的为基础:如果您使用Switch，它将从上到下定向并呈现第一个匹配，因为您将重定向移动到了第一个位置，它将始终先击中该位置，然后再不走其他路线.这就是为什么您的Switch看起来像这样的恕我直言(未经测试):
Building on what Bartek said: if you use Switch, it will go directional from top to bottom and render the first hit, since you moved your redirect to the first position it will always hit that first and then not go to the other routes. Which is why your Switch should look like this imho (untested):
<Router>
<Switch>
<Route path='/bugs' component={BugList}/>
<Route path='/bug/:id' component={BugEdit}/>
<Redirect from='/' to="/bugs" />
<Route path="*" component={NoMatch} />
</Switch>
</Router>
这篇关于React Router总是将我重定向到其他网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
