Question

我的react-router-dom版本是4.3.1，下面是我的代码：

import React from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

import Layout from '../../pages/Layout';
import Home from '../../pages/Home';
import BoatsManager from '../../pages/BoatsManager'; 

export const routes = [
    { path: '/home', component: Home },
    { path: '/boatsManager', component: BoatsManager }
];
	
export default function Router () {

	return (
		<BrowserRouter>
		    <Layout>
		        <Switch>   
		            <Redirect exact from="/" to="/home" />
		            {
                                routes.map(route =>
                                    <Route key={route.path} path={route.path} 
                                     component={route.component} />
                        	)
                       
		            }
                        </Switch>    
		   </Layout>
		</BrowserRouter>

		)
}

问题是，如果我从

之类的重定向组件中删除了确切的字符

 <Redirect from="/" to="/home" />

然后，当我转到/ home或/ boatsManager路径时，将不会呈现相应的组件，如果我将精确添加到Redirect中，则将呈现它们。我认为，如果我不添加确切的内容，则/ home和/ boatsManager都将被重定向到/ home，但至少应渲染路径为/ home的组件。

Answer 1

我认为您的主要问题在于密钥属性。您正在为两个组件路径设置key属性。但是，当您设置从/到/home的重定向时，它会转到/home路径，但是导航历史记录/却没有键，也没有组件绑定，因此很有帮助。这将呈现空白页。要修复，

<Redirect key="/home" from="/" to="/home" />

现在，这与导航历史记录匹配，并将呈现组件。

注意：不使用确切属性时，所有路由都会转到/home。

在React-router-dom中重定向的混乱行为

1 个答案: