时间戳

首页 > 解决方案 > React-router-dom 中重定向的令人困惑的行为

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

问题描述

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

标签： javascriptreactjsreact-router

解决方案

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

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

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

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

推荐阅读