014 React路由-Hash模式-推荐

路由是根据uri的不同来切换对应的组件，实现spa（单页面应用），在页面切换的时候不会刷新，更加接近原生体验。

先来安装路由的组件，下载哪个都行

npm i --save react-router-dom	#功能更全
npm i --save react-router		#适合线上环境

路由有两种模式

HashRouter Hash模式，URL里带#号，刷新的时候页面不会丢失

BrowserRouter 历史记录模式，URL里没有#号，通过历史记录api进行路由切换，刷新会丢失

 

在index.js里引用HashRouter路由

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
//使用HashRouter模式
import { HashRouter } from 'react-router-dom'
//将路由模式的标签作为跟标签
ReactDOM.render(
  <HashRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </HashRouter>,
  document.getElementById('root')
);

serviceWorker.unregister();

在App.js里使用路由

import React from 'react';
import logo from './logo.svg';
import './App.css';
//引入Route，使用路由
import { Route } from 'react-router-dom'
import Home from "./model/Home"
import News from "./model/News"
import Phone from "./model/Phone"

function App() {
  return (
    <div className="App">
      <a href="/#/Home">Home</a><br/>
      <a href="/#/News">News</a><br/>
      <a href="/#/Phone">Phone</a><br/>
      <Route path="/Home" component={Home} />
      <Route path="/News" component={News} />
      <Route path="/Phone" component={Phone} />
    </div>
  );
}

export default App;

注意URL：

在Home.js里编写二级路由：

import React, { Component } from 'react'
import { Route, NavLink } from 'react-router-dom'
import HomeA from './HomeA'

export default class Home extends Component {
    render() {
        return (
            <div>
                <h1>我是Home组件</h1>
                <NavLink to="/Home/HomeA">HomeA</NavLink>
                <Route path="/Home/HomeA" component={HomeA} />
            </div>
        )
    }
}

二级路由的效果，Home和HomeA都会展示出来