Router 的基本使用!
我们需要npm 下载react-router:
npm install react-router --save
BrowserRouter或HashRouter
- Router中包含了对路径改变的监听,并且会将相应的路径传递给子组件;
- BrowserRouter使用history模式;
- HashRouter使用hash模式;
Link和NavLink
- 通常路径的跳转是使用Link组件,最终会被渲染成a元素;
- 是在Link基础上增加了一些样式属性;
- Link中最重要的属性,用于设置跳转到的路径;
Route
- Route用于路径的匹配;
- path属性:用于设置匹配到的路径;
- element属性:设置匹配到路径后,渲染的组件;
- exact:精准匹配,只有精准匹配到完全一致的路径,才会渲染对应的组件;
创建第一个路由:
要使用react-router 创建第一个路由 首先我们需要在 总入口文件里引入:
import { BrowserRouter } from 'react-router-dom' //引入react-router-dom模块包 包裹根目录App
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
这是从 react-router-dom 库导入的第一个组件。它用于包装不同的路线,它使用HTML5 history API来跟踪React应用程序中的路由历史记录。
之后我们在 App.js 文件里 引用该下列方法:
我们需要 使用Routes 包裹住Route 来注册路由
Route 里面path属性是路径,element是该路径所对应的组件。
//引入Routes包裹Route Route设置路由 Link跳转路径,相当于a标签
import { Routes, Route, Link, NavLink } from 'react-router-dom'
function App() {
return (
<div className="App">
<Routes>
{/* 通过定义route内的path和element,确定每一个路径path对应的组件element */}
<Route path='/' element={<Home />} /
<Route path='/newone' element={<Newone />} />
{/* 如果路径地址不存在的话 */}
<Route path='*' element={<NotFound />} />
<Route path='/about' element={<About />}>
{/* 默认路由 */}
<Route path='' element={<Dz />} />
{/* 二级路由 about的子路由 */}
<Route path='/about/address' element={<Dz />} />
<Route path='/about/yhq' element={<Yhq />} />
{/* 如果路径地址不存在的话 */}
<Route path='*' element={<NotFound />} />
</Route>
</Routes>
</div>
);
}
export default App;
下面使用 NavLink 进行一个跳转 相当于a标签:
<NavLink to="/">首页</NavLink>
<NavLink to="/about">about页</NavLink>
跳转路由:
当然,我们也可以跳转路由,但是我们react 不想vue那样使用 push,go,replace进行一个跳转;
我们需要 引入 useNavigate 方法,注意 我们这里使用这些api方法,必须在函数式组件内使用;
请看以下代码片段:
//跳转路由
import { useNavigate } from 'react-router-dom'
function Home() {
//使用引入的useNavigate方法 声明一个对象
let navigate = useNavigate()
return (
<div>
我是home组件
{/* 跳转路由的按钮 */}
<input type="button" value="跳转about组件" onClick={() => { navigate('/about') }} />
</div>
)
}
export default Home;