如何设置 React Router 默认路由重定向到 /home
介绍
路由允许我们配置一个应用程序，该应用程序接受各种 URL 并映射到特定组件。一旦找到匹配的 URL，匹配的页面/组件就会呈现到 HTML DOM 中。
路由通过将 URL 与 React 应用中指定的路由列表进行比较来工作。每条路由都链接到一个<Route>组件，我们在其中配置了完整的路由配置。
在本指南中，您将了解如何开始使用路由并将默认路由重定向到/home。
路由配置
要开始使用 React 进行路由，首先需要使用以下 npm 命令安装该库：
npm install react-router-dom
在开始路由配置之前，您应该了解一些关键术语。
浏览器路由器
BrowserRouter 是使用HTML5 历史 API的路由器实现，它使您的 UI 与浏览器 URL 保持同步。
BrowserRouter 的职责是将所有组件及其路由存储为一个对象。
转变
Switch 组件用于在应用渲染完成后渲染默认组件，并根据需要在路由之间切换。
路线
路由是一个语句，它保存应用程序的具体路径以及组件的名称，并在与 URL 匹配后呈现它。
关联
该链接类似于 HREF 链接，允许您根据指定的路径重定向到特定的组件。
实现默认路由重定向
到目前为止，在本指南中，您已经了解了如何安装包以及用于实现路由的术语。
您可以使用名为BrowserRouter的 API 来实现路由器配置，它包装了我们 React 应用程序中的所有组件，如下所示：
<Router>
<Switch>
<Route exact path="/path1" component={comp1} />
<Route exact path="/path2" component={comp2} />
<Route exact path="/path3" component={comp3} />
<Route exact path="/path4" component={comp4} />
</Switch>
</Router>
在上面的例子中，<Router>是一个父组件，它将其他子组件包装为连接到特定组件的<Route> 。
下一步是创建四个不同的组件，如下所述。
主页.jsx
import React from 'react';
export default Home => <div>This is home component</div>;
测试1.jsx
import React from 'react';
export default Test1 => <div>This is Test1 component</div>;
测试2.jsx
import React from 'react';
export default Test2 => <div>This is Test2 component</div>;
测试3.jsx
import React from 'react';
export default Test3 => <div>This is Test3 component</div>;
这些是您将用于路由的四个简单组件作为示例。接下来，您将转到index.js文件并粘贴以下几行源代码：
import React, { Component } from "react";
import { render } from "react-dom";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Redirect
} from "react-router-dom";
import Home from "./Home";
import Test1 from "./Test1";
import Test2 from "./Test2";
import Test3 from "./Test3";
class App extends Component {
constructor() {
super();
this.state = {
name: "React",
isUserAuthenticated: true
};
}
render() {
return (
<div>
<Router>
<div>
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/test1">Test 1</Link>
</li>
<li>
<Link to="/test2">Test 2</Link>
</li>
<li>
<Link to="/test3">Test 3</Link>
</li>
</ul>
<hr />
<Switch>
<Route
exact
path="/"
render={() => {
return (
this.state.isUserAuthenticated ?
<Redirect to="/home" /> :
<Redirect to="/test1" />
)
}}
/>
<Route exact path="/home" component={Home} />
<Route exact path="/test1" component={Test1} />
<Route exact path="/test2" component={Test2} />
<Route exact path="/test3" component={Test3} />
</Switch>
</div>
</Router>
</div>
);
}
}
render(<App />, document.getElementById("root"));
这些组件有两个部分：
第一部分包含<Link>列表以及组件的路径，因此一旦用户点击其中任何一个链接，路由器就会从路由列表中找到匹配的 URL
第二部分是<Route>配置。每个路由都有组件的名称以及路径声明，因此当用户点击任何<Link>时，就会识别出匹配的<Route>并进行相应的渲染。
需要注意的主要一点是，一旦应用程序被渲染，它就会找到路径'/'。然而，需要重定向到/home路径，你可以使用<Redirect>来实现，就像这样：
<Route exact path="/">
<Redirect to="/home" />
</Route>
在此代码片段中，初始渲染的默认应用程序路径为'/'，因此如果没有附加路径，则它应该重定向到匹配路径，即/home。
<Redirect>允许我们通过覆盖历史对象根据从当前组件到其他指定组件的匹配路径重定向到新组件。
有条件地重定向到默认路径
到目前为止，你已经学习了如何将组件重定向到特定路径。但在很多情况下，你可能需要根据某些条件来渲染特定的组件。
为此，您可以在重定向到不同的组件之前使用三元条件，如下所述。
将一个布尔变量设置为这样的状态：
constructor() {
super();
this.state = {
isUserAuthenticated: true
};
}
所以在重定向到具体组件之前，需要确保用户是否已经登录，源代码应该是这样的：
<Route
exact
path="/"
render={() => {
return (
this.state.isUserAuthenticated ?
<Redirect to="/home" /> :
<Redirect to="/test1" />
)
}}
/>
从上面的例子中，你可以看到，当找到路径'/'时，它将转到渲染道具，在那里它使用this.state.isUserAuthenticated来识别用户是否已登录。根据该值，将发生重定向。
这就是如何使用<Redirect>重定向到特定组件并有条件地执行此操作。
结论
路由是任何应用程序需要的第一个配置，并且您已经了解了将组件重定向到默认路由的最佳方法之一，即使 URL 中的路径为空。
确保在你的 React 应用中使用这两种方法来简化路由。我希望本指南能帮助你学习最佳方法。如有任何疑问，请随时联系Codealphabet。
了解更多
探索 Pluralsight 的这些 React 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~