React中路由的使用
原创
在react中配置前端路由一般会使用react-router这个包，但是下V4版本之后，这个包针对不同的开发环境被拆分成了不同的包，在web中我们使用react-router-dom。
看示例代码：
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}观察代码，步骤如下：
1、引入react-router-dom
2、从react-router-dom中导出需要使用的模块组件，这里面有：
a、路由最外层组件 Router
b、Switch包裹组件，作用是匹配路由后只渲染一个组件
c、Route站位组件，通常需要传递组件参数，有多种传递方式
d、Link导航组件，类似超链接。
3、结构布局，Router在最层，Switch在中间层包裹所有Route，Link放在导航部分，一般Link部分会放在页面中的公共部分。
上面三步基本基本能满足大部分React路由的需求了，但是这里面有需要大家注意的地方：
A、首先是路由的匹配是从上到下，也就是在switch包裹的Route中，先匹配/about,在匹配/users,在匹配/,代码中国如果没有switch，你无论访问哪个路由 /对应的组件都会显示，因为/匹配所有路由。
B、其次"/"Route所包裹的组件放在了所有路由组建的最后面，这是因为如果放在最前面，那么/about和/users就不会显示了，因为只要访问/*，都会被匹配到/路由，作者这里将其放在了所有的路由组件后面，其实这里还有另外一种使用方式，个/路由组件添加一个exact属性，这是精确匹配的意思，只用路由是/才能和这个路由匹配。
局部代码如下：
<Switch>
<Route exact={true} path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
</Switch>这里面还有需要注意的地方是Route的使用，Route使用时需要向其内部传递组件，这里有三种方式，分别是children、component、render。
上面代码示例其实是第一种，Route标签包含需要被渲染的组件标签，接下来我们看第二种使用component，局部改造代码如下：
<Switch>
<Route path="/about" component={About}>
</Route>
<Route path="/users" component={Users}>
</Route>
<Route path="/" component={Home}>
</Route>
</Switch>此时的效果和前面一样，只是写法不同而已，这里需要注意，children的优先级高于component。
再看第三种，render，代码如下：
<Switch>
<Route path="/about" render={() => { return <About />}}>
</Route>
<Route path="/users" render={() => { return <Users /> }}>
</Route>
<Route path="/" render={() => { return <Home /> }}>
</Route>
</Switch>大家在使用时需要注意。
以上便是React中路由的使用，希望对你有所帮助。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。