REACT路由React路由允许我们在React app中实现多页面应用。它可以根据URL改变页面内容和布局。 Reac

React路由允许我们在React app中实现多页面应用。它可以根据URL改变页面内容和布局。

React路由的核心是Route组件。我们会为每个路由创建一个Route组件,并为其指定路径和组件。当URL匹配某个Route的路径时,该Route的组件就会呈现在页面上。

要使用React路由,我们需要安装react-router-dom包。它提供和两个 router 组件。区别是前者使用HTML5 history API,后者使用URL hash。通常我们会选择。

然后我们会创建多个组件,为其指定路径(path属性)和组件(component属性)。的嵌套可以表示URL嵌套和页面嵌套。当URL发生变化时,React路由会找到第一个匹配的,并展示其指定的组件。其他未匹配的将会卸载其组件。

我们也可以为指定exact属性,使其仅在路径完全匹配时才展示组件。这可以解决路径嵌套时的问题。React路由还提供了组件,可以重定向至另一个路径,以及组件,可以渲染第一个匹配的。

此外,React路由的路由链接也需要特殊处理。我们要使用组件而不是标签。会在前端处理路由切换,而不会重新刷新页面。

总之,React路由通过管理URL与界面呈现之间的对应关系,使我们可以创建SPA应用。它提供了、、、和等组件来实现声明式的路由配置。

理解和掌握React路由是成为React开发者的基本要求之一。它是构建React单页应用的基石,也是React的重要功能之一。

 jsx
 import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
 
 const Home = () => <h2>Home</h2>
 const About = () => <h2>About</h2>
 
 const App = () => (
   <Router>
     <div>
       <nav>
         <ul>
           <li>
             <Link to="/">Home</Link>
           </li>
           <li>
             <Link to="/about/">About</Link>
           </li>
         </ul>
       </nav>
 
       <Route path="/" exact component={Home} />
       <Route path="/about/" component={About} />
     </div>
   </Router>
 )

该例子创建了Home和About两个路由,并使用组件作为导航链接。当点击链接时,会在前端通过组件处理路由切换,而不重新刷新页面。组件用于定义路由规则。path属性表示路径,component属性指定要展示的组件。exact属性表示仅在路径完全匹配时展示组件。更复杂的路由规则:

 jsx
 <Router>
   <Switch>
     <Route path="/about" component={About} />
     <Route path="/contact" component={Contact} />
     <Route path="/:topic" component={Topic} />
     <Redirect from="/redirect" to="/about" />
     <Route component={NoMatch} />
   </Switch>
 </Router>

该示例使用渲染第一个匹配的,包含路径参数(:topic)的路由,重定向路由,以及 mismatch 的。此外,React路由还允许路由嵌套,以实现页面的嵌套结构。总之,通过一系列路由配置,我们可以创建完整的单页应用。