react16 路由配置

react16 路由配置

环境：
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0"

代码：

import React, { lazy, Suspense, Component } from 'react'
import {Route, HashRouter, Switch, Redirect} from 'react-router-dom'

const Home = lazy(() => import('../views/Home.jsx'));
const About = lazy(() => import('../views/About.jsx'));
const NoMatch = lazy(() => import('../views/NoMatch.jsx'));

class MainRoute extends Component { 
  constructor(props) {
    super(props)
  }
  loading() {
    return (<div>
      Loading...
    </div>)
  }
  render(){
    return(
      <HashRouter>
        <Suspense fallback={this.loading()}>
          <div>
              <Switch>
                  <Route path="/" exact component={Home}/>
                  <Route path="/home" exact component={Home}/>
                  <Route path="/about" exact component={About}/>
                  <Route path="*" exact component={NoMatch}/>
                  {/* <Route path="/404" exact component={NoMatch}/>
                  <Redirect to="/404" /> */}
              </Switch>
          </div>
        </Suspense>
      </HashRouter>
    )
  }
}

export default MainRoute;

<Route path="*" exact component={NoMatch}/>
和
<Route path="/404" exact component={NoMatch}/>
<Redirect to="/404" />
这两种写法都可以达到404页面的效果

exact

exact默认为false，如果为true时，需要和路由相同时才能匹配，但是如果有斜杠也是可以匹配上的。
如果在父路由中加了exact，是不能匹配子路由的,建议在子路由中加exact

strict

<Route strict path="/one" component={About} />
strict默认为false，如果为true时，路由后面有斜杠而url中没有斜杠，是不匹配的

image.png
资料来源：https://segmentfault.com/a/1190000019130514

Switch

渲染第一个被location匹配到的并且作为子元素的<Route>或者<Redirect>
使用<Switch>包裹和直接用一打<Route>s有什么区别呢？
<Switch>是唯一的因为它仅仅只会渲染一个路径。相比之下（不使用<Switch>包裹的情况下），每一个被location匹配到的<Route>将都会被渲染。
这就导致有可能一个路径，同时渲染多个组件页面，即便是在<route>中加了exact也会。
比如：同时把home页面和404页面渲染在一个页面。

作者：一半苍白
链接：https://www.jianshu.com/p/ed5e56994f13
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

demo：

// src/index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import MyRouter from './router.js'
import './css/main.css'

ReactDOM.render(
  <MyRouter />,
  document.getElementById("app")
);
// src/router.js
import React, { Component,  lazy, Suspense} from 'react'
import {Route, HashRouter, Switch} from 'react-router-dom'

let Index = lazy(() => import('@pages/index/Index.jsx'));
let Login = lazy(() => import('@pages/login/Login.jsx'));
let NotFind404 = lazy(() => import('@pages/404/404.jsx'));

class MyRouter extends Component {
  fallback(){
    return (
      <div>Loading...</div>
    );
  }
  render(){
      return(
        <HashRouter>
          {/* <div> */}
            <Suspense fallback={this.fallback()}>
              {/* <Switch>，只有一个路由会被渲染，并且总是渲染第一个匹配到的组件。 */}
              <Switch>
                  <Route path="/" exact component={Index}/>
                  <Route path="/page" component={Index}/>
                  <Route path="/login" exact component={Login}/>
                  <Route component={NotFind404}/>
              </Switch>
            </Suspense>
          {/* </div> */}
      </HashRouter>
      )
  }
}
export default MyRouter;

//layout
//src/pages/login/Login.jsx
import React, { Component } from 'react'

class Login extends Component {
  constructor(props){
    super(props);
    this.handleGoHome = this.handleGoHomeClick.bind(this);
  }
  handleGoHomeClick(){
    this.props.history.push('/home');
  }
  render(){
      return(
        <div className="page-box">
          <h1 onClick={this.handleGoHome}>Login</h1>
        </div>
      )
  }
}
export default Login;


//src/pages/index/Index.jsx
import React, { Component,  lazy, Suspense} from 'react'
import {BrowserRouter as Router, Route, HashRouter, Switch, Redirect } from "react-router-dom";

import NavTop from '@pages/components/NavTop.jsx'

let Home = lazy(() => import('@pages/home/Home.jsx'));
let NotFind404 = lazy(() => import('@pages/404/404.jsx'));
let Test = lazy(() => import('@pages/Test/Test.jsx'));

class Index extends Component {
  constructor(props){
    super(props);
  }
  fallback(){
    return (
      <div>Loading...</div>
    );
  }
  render(){
      return(
        <div className="wrap">
            <h1>index</h1>

            {/* <Switch>，只有一个路由会被渲染，并且总是渲染第一个匹配到的组件。 */}
            <Switch>
              <Route path="/page/" exact component={Home}></Route>
              <Route path="/page/home" exact component={Home}></Route>
              <Route path="/page/test" exact component={Test}></Route>
              <Route component={NotFind404} />
            </Switch>
            
        </div>
      )
  }
}
export default Index;


//src/pages/home/Home.jsx
import React, { Component } from 'react'
import store from '@/store/store.js'

class Home extends Component {
  componentWillMount () {
    // 设置state,会触发subscribe方法
    store.dispatch({
      type: 'GET_NAV_PATH',
      payload: 'HOME'
    });
  }
  render(){
      return(
        <div className="page-box">
          home 123
        </div>
      )
  }
}
export default Home;