react-router5.0

Route 8

Project using the most recent version 5.0 react-router, and when you find a word to see npm

This package provides the core routing functionality for React Router, but you might not want to install it directly. If you are writing an application that will run in the browser, you should instead install react-router-dom.

So I downloaded directly in the project react-router-dom.

npm install --save react-router-dom

// App.js

import React from 'react';
import './App.scss';
// 多个路由切换需要用 Switch 
import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'
import Home from './pages/Home'
import User from './pages/User'
import About from './pages/About'
import NoMatch from './pages/NoMatch'

function App() {
  return (
    <BrowserRouter >
      <Switch>
        <Route exact  path="/" component={Home}/>
        <Route path="/about" component={About} />
        <Route path="/user" component={User} />
        <Redirect to="/" />
        {/* <Route  component={NoMatch} /> */}
      </Switch>
  </BrowserRouter>
  );
}

export default App;

There are two routing modes

1）<BrowserRouter>

This model allows URL consistent with the UI. http: // localhost: 3000 / use history API (HTML5 offers pushState, replaceState and popstate events) to keep pace UI and URL.

Attributes

basename: string

All of the reference position URL. If your application is deployed in a subdirectory of the server, you need to set it to a subdirectory. basename The correct format is preceded by a leading slash, but can not have a trailing slash.

<BrowserRouter basename="/calendar">
  <Link to="/today" />
</BrowserRouter>

forceRefresh: bool

If true, in the course of navigation in the entire page will be refreshed. Under normal circumstances, only we do not support HTML5 history API browser to use this feature.

const supportsHistory = 'pushState' in window.history;

<BrowserRouter forceRefresh={!supportsHistory} />

getUserConfirmation: function

Function is used to confirm the navigation, using the default window.confirm . For example, when from /anavigation to /btime, will use the default confirmfunction pops up a prompt, after the user clicks OK to navigate, or no treatment. Annotation: The need to meet <Prompt>used together.

// 这是默认的确认函数
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message);
  callback(allowTransition);
}

<BrowserRouter getUserConfirmation={getConfirmation} />

keyLength: number

location.keyThe length of default 6.

<BrowserRouter keyLength={12} />

http://www.home.com:8080//location/page.html?ver=1.0&id=timlq#love

window.location.search query (parameters) section. In addition to the assignment to the dynamic language, we can also give a static page and use javascript to get the parameter value should believe that the return value:? Ver = 1.0 & id = timlq　　

window.location.hash anchor Return value: #love

2）<HashRouter>

This model is behind the hash URL consistent with the UI. HTTP: // localhost: 3000 / # /

This model has a flaw, that is the url parameter is not very good to get, window.location.search get back to that url? Plus parameter, if the hash mode, it will get less. This pattern is slightly affect the appearance.

basename: string

All of the reference position URL. basenameThe correct format is preceded by a leading slash, but can not have a trailing slash.

<HashRouter basename="/calendar">
  <Link to="/today" />
</HashRouter>

In the example above <Link>it will eventually be presented as:

<a href="#/calendar/today" />

getUserConfirmation: function

Function is used to confirm the navigation, using the default window.confirm .

// 这是默认的确认函数
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message);
  callback(allowTransition);
}

<HashRouter getUserConfirmation={getConfirmation} />

hashType: string

window.location.hashUse hashtype, are the following:

slash - followed by a slash, such as # / and # / sunshine / lollipops
noslash - not followed by a slash, e.g. # and # sunshine / lollipops
hashbang- Google style ajax crawlable !, Such as # / and # / sunshine / lollipops!

The default is slash.

Development process, the need to consult the routing information can refer to the following link

https://www.jianshu.com/p/97e4af32811a

9 mobx

https://blog.csdn.net/qq_41831345/article/details/90903352

Route 8

Guess you like