React-router-dom 中重定向的令人困惑的行为答案

【问题标题】：Confusing behavior of Redirect in React-router-domReact-router-dom 中重定向的令人困惑的行为
【发布时间】：2019-01-24 01:39:18
【问题描述】：

我的 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 中添加exact，它们将被渲染。我想如果我不准确添加，/home 和 /boatsManager 都会被重定向到 /home，但至少应该呈现路径为 /home 的组件。

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

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

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

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

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

【讨论】：