React Router（一）：React Router基本语法

一、路由实现的基本架构

① 路由的定义

我们会通过一个配置文件或者是一个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