React学习17（解决样式丢失路由的严格匹配路由的重定向）

最新推荐文章于 2023-12-25 14:03:35 发布

xiaojian044

最新推荐文章于 2023-12-25 14:03:35 发布

阅读量608

点赞数 1

文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/xiaojian044/article/details/128344219

版权

解决多级路径刷新页面丢失样式的问题

什么情况下刷新页面会丢失样式

多级路径刷新页面时会造成样式丢失，如下代码：

import React, { Component } from 'react'
import { Route, Switch} from 'react-router-dom'
import Home from './pages/Home' //Home是路由组件
import About from './pages/About' // About是路由组件
import Header from './components/Header' // Header是一般组件
import MyNavLink from './components/MyNavLink'

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header/>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 在原生html中，靠a标签实现页面的跳转 */}
              {/* <a className="list-group-item active" href="./about.html">About</a>
              <a className="list-group-item" href="./home.html">Home</a> */}

              {/* 在React中靠路由链接切换组件 */}
              <MyNavLink to="/xiaojian/about" title="About" >About</MyNavLink>
              <MyNavLink to="/xiaojian/home" title="Home" >Home</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
              {/* 注册路由 */}
              <Switch>
                <Route path= "/xiaojian/about" component={About}/>
                <Route path="/xiaojian/home" component={Home}/>
              </Switch>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

解决方案

方案一：public/index.html中引入样式的时候不写./，而是写为/（常用）

方案二：public/index.html中引入样式的时候不写./，而是写为%PUBLIC_URL%（常用）

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link rel="stylesheet" href="/css/bootstrap.css"/> 解决刷新丢失样式的第一种
方法--> 
  <!---解决刷新样式丢失的第二种方法-->
  <!-- <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css"/> -->
  <link rel="stylesheet" href="./css/bootstrap.css"/> 
  <title>react脚手架</title>

  <style>
    .xiaojian{
      background-color: orange !important;
      color: white !important;
   }
  </style>
</head>
<body>

  <div id="root"></div>
</body>
</html>

方案三：在src/index.jsx中用包裹App组件

import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter } from 'react-router-dom'
import App from './App.jsx'


ReactDOM.render(
  <HashRouter>
     <App/>
  </HashRouter>,
  document.getElementById('root')
)

路由的严格匹配与模糊匹配

1）默认使用的是模糊匹配（简单记忆：【输入的路径】必须包含【匹配的路径】，且顺序要一

致）

2）开启严格匹配：

<Route exact={true} path= "/about" component={About}/>

3)严格匹配不要随便开启，需要再开，有时候开启会导致无法继续匹配二级路由

import React, { Component } from 'react'
import { Route, Switch} from 'react-router-dom'
import Home from './pages/Home' //Home是路由组件
import About from './pages/About' // About是路由组件
import Header from './components/Header' // Header是一般组件
import MyNavLink from './components/MyNavLink'

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header/>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 在原生html中，靠a标签实现页面的跳转 */}
              {/* <a className="list-group-item active" href="./about.html">About</a>
              <a className="list-group-item" href="./home.html">Home</a> */}

              {/* 在React中靠路由链接切换组件 */}
              <MyNavLink to="/about" title="About" >About</MyNavLink>
              <MyNavLink to="/home/a/b" title="Home" >Home</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
              {/* 注册路由 */}
              <Switch>
                {/* 此处 exact={true}开启了精准匹配 或者是直接写exact的简写形式*/}
                <Route exact={true} path= "/about" component={About}/>
                <Route exact={true} path="/home" component={Home}/>
              </Switch>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

Redirect的使用

1）一般写在所有注册路由的最下方，当所有的路由都无法匹配时，跳转到Redirect指定的路由

2）具体编码：

import React, { Component } from 'react'
import { Route, Switch, Redirect} from 'react-router-dom'
import Home from './pages/Home' //Home是路由组件
import About from './pages/About' // About是路由组件
import Header from './components/Header' // Header是一般组件
import MyNavLink from './components/MyNavLink'

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header/>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 在原生html中，靠a标签实现页面的跳转 */}
              {/* <a className="list-group-item active" href="./about.html">About</a>
              <a className="list-group-item" href="./home.html">Home</a> */}

              {/* 在React中靠路由链接切换组件 */}
              <MyNavLink to="/about" title="About" >About</MyNavLink>
              <MyNavLink to="/home" title="Home" >Home</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
              {/* 注册路由 */}
              <Switch>
                <Route  path= "/about" component={About}/>
                <Route  path="/home" component={Home}/>
                {/* 重定向，在刚进入页面的时候显示的页面 */}
                <Redirect to="/about"/> 
              </Switch>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}