一、路由实现的基本架构
① 路由的定义
我们会通过一个配置文件或者是一个react标记来定义一些路由
//一个路由对应一个组件
/topic/:id -> Topic
/topics -> List
/about -> About
② 组件容器
通常是页面布局的一部分,就是由路由来控制具体展示哪一个组件。当url发生变化的时候其实只是组件容器发生变化,其他不发生变化。
③ Router
一个路由的定义通过一个Router的解析会返回不同的组件,放到组件容器中。
二、React Router的基本实现
<Router>
<div>
//定义导航
<ul id='menu'>
<li><link to='/home'>Home</link></li>
<li><link to='/home'>Home</link></li>
<li><link to='/home'>Home</link></li>
</ul>
//定义路由
<div id='page-container'>
<Route path='/home' component={Home} />
<Route path='/home' component={Home} />
<Route path='/home' component={Home} />
</div>
</div>
</Router>
三、三种路由的实现方式
① URL路径
常规的路由(BrowserRouter)
② hash路由(HashRouter)
支持低版本浏览器
③ 内存路由(MemoryRouter)
你的路由不会反映到URL路径上,在做服务器端渲染的时候会有用
四、React Router核心API
① < Link>:普通链接
②< NavLink activeClassName=‘selected’>:类型link但是会添加当前选中状态
③< Prompt when={} message=‘leave?’>:满足条件提示用户是否离开当前界面
④< Redirect>:重定向当前页面
⑤< Route>:路由配置的核心标记,路由匹配的时候显示对应组件
⑥< Switch>:只显示第一个匹配的路由
参考文档:https://reactrouter.com/web/guides/quick-start
参考视频:https://time.geekbang.org/course/detail/100009301-11272?utm_source=pinpaizhuanqu&utm_medium=geektime&utm_campaign=guanwang&utm_term=guanwang&utm_content=0511