Question

我是React和React Router的新手。我正在使用React Router v4并遵循基于以前版本的教程 - 但我使它工作（使用SO上的一些东西以及反应路由器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日编辑。尽管下面有人的宝贵帮助，但仍未解决。我尝试在路由器中使用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>：

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

问题仅在页面加载时发生，而不是在重新输入URL时发生，因为您的路由基于哈希值，并且仅在哈希部分更改时浏览器不会重新加载页面。
请注意，React-Router v4中的Redirect组件仅在呈现时执行重定向 - 它不会设置永久重定向规则，因此在您的情况下，重定向仅适用于页面加载。如果您希望自己的应用始终重定向指定的网址，则必须为要重定向的网址定义Route并呈现Redirect：

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

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

Answer 2

以Bartek所说的为基础：如果你使用Switch，它将从上到下进行定向并渲染第一个命中，因为你将重定向移动到第一个位置，它将始终首先击中，然后不会转到另一个位置路线。这就是为什么你的Switch应该看起来像这个imho（未经测试）：

<Router>
    <Switch>
        <Route path='/bugs' component={BugList}/>
        <Route path='/bug/:id' component={BugEdit}/>
        <Redirect from='/' to="/bugs" />
        <Route path="*" component={NoMatch} />
    </Switch>
</Router>

Answer 3

我知道它的04/2020，但这将解决您的问题。

    <Switch>
        <Route path='/bug/:id' component={BugEdit}/>
        <Route path='/bugs' component={BugList}/>
        <Redirect from='/' to="/bugs" />
        <Route path="*" component={NoMatch} />
    </Switch>
</Router>```

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

3 个答案: