react学习15-React路由react-router的基本使用

React-router

官网

基本使用

路由使用的基本步骤：

• 安装依赖包

  # npm安装
  npm install react-router-dom
  
  # yarn安装
  yarn add react-router-dom
  

• 导入路由相关组件

  import { BrowserRouter as Router, Route, Link } from "react-router-dom";
  

• 配置路由的容器BrowserRouter（所有的路由相关配置必须包含在容器中）

  <BrowserRouter>
    路由相关配置:路由填充位和链接
  </BrowserRouter>
  

• 配置路由连接Link（用户点击的链接）

  <Link to="/user">用户</Link>
  

• 配置路由填充位置以及路径和组件的映射关系

  <Route path="/user" component={User} />
  

• 路由组件

  function User () {
    return <div>User</div>
  }
  

嵌套路由

• 在父路由组件中配置子路由

// 父级路由
<BrowserRouter>
    <div>
        <div>基本路由</div>
        <ul>
            <li>
                <Link to='/home'>主页</Link>
            </li>
        </ul>
        <Route path='/home' component={Home}/>
    </div>
</BrowserRouter>

// 子路由配置
function Home() {
    return (
        <div>
            <div>子路由</div>
            <ul>
                <li>
                    <Link to='/home/info'>子路由信息</Link>
                </li>
            </ul>
            <Route path='/home/info' component={Info}/>
        </div>
    );
}

Switch组件与exact属性

• Switch作用：保证中间的路由映射仅仅匹配一个，如果有多个匹配，以最先匹配的为准。
  • 如果Route组件没有path，会作为默认显示的组件。
• Route组件中exact属性的作用：路径进行精确匹配，不会存在包含关系（比如：/about 路径不会匹配 / 路径）

<Switch>
  <Route path='/' exact component={Home}/>
  <Route path='/info' component={News}/>
  <Route path='/tech' component={Tech}/>
  <Route component={NoMatch}/>
</Switch>

重定向

• 在JSX中可以直接使用重定向组件实现跳转

function Login() {
  let flag = false;
  // 如果页面中渲染<Redirect to='/tologin'/> 那么就会重定向到to指定位置
  let info = flag? <div>主页信息</div> : <Redirect to='/tologin'/>;
  return info;
}

function Home () {
  // Home只有登录后才可以访问，如果没有登录需要跳转到登录页面
  // 判断用户是否已经登录
  let token = sessionStorage.getItem('mytoken')
  if (token) {
    // 已经登录
    return <div>主页内容</div>
  } else {
    // 没有登录,跳转到登录页面
    return <Redirect to='/login'/>
  }
}

• 配置路由映射时，如果匹配到特定路由就进行跳转

<Switch>
  <Route path='/home' component={Home}/>
  <Redirect from='/abc' to='tech'/>
</Switch>