将状态传递给React Router渲染的组件

单击博客文章最令人沮丧的事情之一是，当您只需将答案放在顶部时，就必须滚动浏览人们对事物的漫长解释。标题中的操作方法如下：

<Router>
  <NavLink to="/homepage">Homepage</NavLink>
  <Route path="/homepage" render={props => 
  (<Homepage {...props} pieceOfState={this.state.pieceOfState}/>)
}/>
</Router>

路由器本身你可以放在任何你想放的地方，但它最有意义的是选择一个相当顶级的应用程序部分，所以通常在你的渲染方法应用程序.js文件。正如您在上面看到的，我们使用的NavLink指向这个特定站点或应用程序的主页，路径是驱动力，它将实际执行渲染组件的工作。如果您不需要向组件传递任何状态，您通常只会看到这样的路由器：

 <Route path='/homepage' component={Homepage} />

但是在React中，传递状态（或helper方法）是所有能量的来源——这就是React如此反应的原因。因此，您需要使用第一个代码段来获得所需的功能。该代码中的路由路径使用render方法传递内联函数，内联函数将呈现主页——您可能会想知道，为什么我们不能使用snippet#2中的常规组件方法传递内联函数并得到相同的结果？答案是，如果使用内联函数，每次状态改变时，component方法都会卸载和重新装载整个组件。这就产生了一个不必要的能源昂贵的程序，当你可以只使用整洁的渲染方法，友好的React开发者打算让你使用。

现在，这部分已经过时了，下面是前面提到的其他有趣的事情。

有时，在用React编写代码时，很难保持代码DRY。您可能会发现自己编写this.state数次，同时将特定的状态块传递给所需的组件。一个有趣的小技巧，可以帮助避免该问题：您可以不指定部分就传递整个dang状态。看起来像这样：

<Homepage state={this.state}/>

这很简单。这是相当前卫的吗？无论如何，您都可以使用this.props.state.pieceOfState访问该组件内部的状态块。

活动链接

样式化链接，以便用户在关联页面上时做出响应从未如此简单。您可以简单地给NavLink一个activestyle类（以及您想出现的任何CSS），如下所示：

<NavLink to='/homepage' activeStyle={{fontWeight: "bold", color: 'blue'}}>Homepage</NavLink>

React将处理监听用户所在的页面。

渲染404

有时你的网站的用户会变得任性，他们可能会猜到可用的路径，所以他们只会键入路径，期待看到它出现。React很好，它不会破坏你的网站，但不会告诉用户页面不存在。要呈现404，使用开关标记对路由进行分组非常有用。

<Switch>
    <Route path='/homepage' component={Homepage}/>
    <Route path='/profile' component={Profile}/>
    <Route path='/seaturtles' component={Seaturtles}/>
    <Route component={NoMatch}/>
</Switch>

在上面，组件“NoMatch”没有给定路由，因此所有未定义的路由都将呈现该组件，您可以构建该组件来呈现您希望404页的任何外观。你可以把任何东西放在那里。约翰尼·布拉沃的形象。一个链接到维基百科404的页面。一个永不停歇的宪法滚动循环。世界就是你的牡蛎。

重定向

直观地说，如果您的用户已登录，您将不希望他们能够导航到“/登录”页面。但是，你也不想让他们看到404页。是时候实施重定向了。这是通过指定另一个到“/signin”的路由并向其提供呈现重定向的指令来实现的。观察：

<Route path="/signin" render={()=> (<Redirect to='/search'/>)}/>

这段代码使用与传递道具相同的渲染方法来显示路线，但是没有道具本身。匿名函数指向我们的重定向，我们可以指定我们希望用户发送到的URL。

重要提示

您必须将任何和所有路由器元素导入到您打算使用它们的任何文件中。例如，要执行本文中列出的所有操作，您需要导入文件顶部的适当项：

import {BrowserRouter as Router, Route, NavLink, Switch, Redirect} from 'react-router-dom';

谢谢您的阅读，祝您生活愉快！