现在我们来搞一搞React中的路由吧，别问我为什么这木喜欢用搞这个字，因为它比较深奥。
注意下面我们使用的是React-Router-DOM
React中的路由基本使用还是满简单的，零碎的小东西有点多，所以我直接把他们揉到一起做了一个小例子，代码我都写上注释了，应该挺简单易懂的
：
代码，照着代码操作就可以了
import {
Route,Switch,Link,Redirect,NavLink,BrowserRouter as Router
} from 'react-router-dom'<span style="color: #000000">
class Home extends Component{
render(){
<span style="color: #0000ff">return<span style="color: #000000"> (
<NavLink to="/food" activeClassName="active">food</NavLink><hr/>
<NavLink to="/wiki" activeClassName="active">wiki</NavLink><hr/>
<NavLink to="/profile" activeClassName="active">profile</NavLink><hr/>
</ul><span style="color: #000000">
{</span><span style="color: #008000">/*</span><span style="color: #008000"> 使用Switch是为了将React默认的包容性路由变为排他性路由 </span><span style="color: #008000">*/</span><span style="color: #000000">}
{</span><span style="color: #008000">/*</span><span style="color: #008000"> 包容性路由：/food 既能匹配到/ 又能匹配到/food
排他性路由：只能匹配一个 /food就只能匹配到/food </span><span style="color: #008000">*/</span><span style="color: #000000">}
</span><Switch><span style="color: #000000">
{</span><span style="color: #008000">/*</span><span style="color: #008000">Redirect 是路由转化 即匹配到某一个路由转化到另一个路由 </span><span style="color: #008000">*/</span><span style="color: #000000">}
</span><Redirect from="/" exact to="/food"/>
<Route path="/food" component={Food}/>
{<span style="color: #008000">/*</span><span style="color: #008000"> 除了用Switch外也可以用exact来避免一个路由匹配多个，exact是精准匹配
但是使用exact时需要每个路由上都<a href="https://www.f2er.com/tag/jiashang/" target="_blank" class="keywords">加上</a>exact才能达到和Switch一样的<a href="https://www.f2er.com/tag/xiaoguo/" target="_blank" class="keywords">效果</a> </span><span style="color: #008000">*/</span><span style="color: #000000">}
{</span><span style="color: #008000">/*</span><span style="color: #008000"> <Route path="/wiki" exact component={Wiki}/> </span><span style="color: #008000">*/</span><span style="color: #000000">}
</span><Route path="/wiki" component={Wiki}/>
<Route path="/profile" component={Profile}/>
<Route component={Page404}/>
</Switch>
</div>
</Router><span style="color: #000000"> )
}
}
<span style="color: #008000">//<span style="color: #008000">定义路由使用的组件
<span style="color: #008000">//</span><span style="color: #008000">在Food中定义子路由</span>const Food = () =><span style="color: #000000"> (
<Link to="/food/foodlist/3">foodlist
<Link to="/food/foodmenu">foodmenu
<span style="color: #000000"> )
const Profile = () =><span style="color: #000000"> (
<span style="color: #000000"> )
const Page404 = () =><span style="color: #000000"> (
<span style="color: #000000"> )
<span style="color: #008000">//<span style="color: #008000">定义路由使用的组件结束
<span style="color: #008000">//<span style="color: #008000">子路由调用的组件
const Foodlist = () =><span style="color: #000000"> (
<span style="color: #000000"> )
const Foodmenu = () =><span style="color: #000000"> (
<span style="color: #000000"> )
export <span style="color: #0000ff">default Home
<div class="cnblogs_code">
特别注意：/index.css是我引入的一个高亮的样式
index.css里面的代码
运行结果：
这个运行结果丑是丑了点，但是功能没瑕疵，和我一样，不靠颜值吃饭