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

Question

我是 React 和 React Router 的新手。我正在使用 React Router v4 并遵循基于以前版本的教程 - 但我使它工作(使用在 SO 上找到的一些东西和在 react router v4 docs 上找到的一些东西)。

尽管有一件事情困扰着我。

我有一个网址 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 日 .尽管得到了下面某人的宝贵帮助，但仍然没有解决。我尝试在路由器内使用 Switch，但它根本不起作用(未显示任何内容)。所以问题还在发生，这是我的 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 时发生，因为您的路由基于散列，并且当仅散列部分更改时，浏览器不会重新加载页面。
请注意 Redirect React-Router v4 中的组件仅在呈现时执行重定向 - 它没有设置永久重定向规则，因此在您的情况下重定向仅适用于页面加载。如果您希望您的应用始终重定向给定的 URL，您必须定义 Route对于您想要重定向和呈现的 URL Redirect :

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

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