React Router 总是将我重定向到不同的 url

Question

我是 React 和 React Router 的新手。我正在使用 React Router v4 并遵循基于以前版本的教程 - 但我让它工作了（使用在 SO 上找到的一些内容和 React Router v4 文档上的一些内容）。

但有一件事困扰着我。

我有一个网址http://localhost:3000/#/bugs，它基本上加载了我所有错误的列表。但我也有可能的网址，如http://localhost:3000/#/bugs?priority=low&status=open ，它加载一组特定的网址。

网址本身可以正常工作并按预期完成工作。

奇怪的是，每当我输入http://localhost:3000/#/bugs?priority=low&status=open（或任何参数）时，该组件都会执行其工作，但 URL 地址栏显示http://localhost:3000/ #/bugs（尽管渲染显示了与优先级和状态相关的所有内容）。

不知何故，URL 位置栏发生了变化，但我不明白为什么。

这是我的 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 日编辑。尽管有下面某人的宝贵帮助，这个问题仍然没有解决。我尝试在路由器内使用交换机，但它根本不起作用（没有显示任何内容）。所以问题仍然发生，这是我的App.js的当前状态，使用react-15.5.3，react-dom-15.5.3，react-router-4.0.0和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')
);

Answer 1

问题是，即使您输入带有查询的 URL，此 URL 也会匹配Redirect路径（因为它只是/任何 URL 匹配此模式），因此会发生重定向/bugs。您必须使用Switch（记住导入它）来仅渲染第一个<Route>或<Redirect>与 URL 匹配的：

<Router>
     <Switch>
        <Route path='/bugs' component={BugList}/>
        <Redirect from='/' to="/bugs" />
        ...
   </Switch>
</Router>

该问题仅发生在页面加载时，而不是重新输入 URL 时，因为您的路由基于哈希值，并且当仅哈希部分发生更改时，浏览器不会重新加载页面。
请注意，RedirectReact-Router v4 中的组件仅在渲染时执行重定向 - 它不会设置永久重定向规则，因此在您的情况下，重定向仅在页面加载时起作用。如果您希望应用程序始终重定向给定的 URL，则必须Route为要重定向和渲染的 URL进行定义Redirect：

<Route path='/oldUrl' render={() => (
    <Redirect to="newUrl" />
)}/>

此外，React-Router v4 与 v3 有很大不同，因此我不建议使用 v3 教程 - 它没有意义。