Kee, React-router

Order

Now using react to write a single page application is basically using React-router to do the front-end routing it! Recently in the process of using react-router encountered a lot of problems, summed up here.

Browser URL

React-router By default, the history is createhashhistory , that is, it uses the hash () part of the URL # to create example.com/#/some/path the shape of the route, so you will see more URLs like _ KEY=S1GVRM 's query, it's really hard to see. And this is not the official recommendation in the actual production application。要改变这种情况的话，我们需要去使用 createBrowserHistory ，在我们的代码中引入history，并在Router组件处调用createBrowserHistory 方法即可。

Import React from "react"; import Reactdom from "React-dom"; import Createbrowserhistory from "history/lib/createbrowserhistory"Import {Router,route,link,browserhistory,indexroute,indexlink} from "React-router";classAPP extends react.component{render () {return(            ...        ); }}; Reactdom.render ((<router history={createbrowserhistory ()}>        ...        </Router>), document.getElementById ("app"));

In fact, there are many details about the URL, because React-router itself is built on the history. The URL of a single page app is just an indication of react-router, and the jump between interfaces is entirely up to React-router, react-router check the current URL and then render the matching routing component So enter a correct non-root path directly on the browser and you can only see 404.

Component communication

This is a topic that can never be react by writing code. React-router was developed based on react, so each of its route is a component. Communication between routing components is generally implemented by link, and can be divided into two depending on the routing parameters. This is easy to understand, because these two ways are not much different from the back-end routes we normally write.

1 Param,param pass through/:p Aram Way.

For example, we now have a routing component that displays a list of messages, and we need to jump to the routing component that displays the details of the clicked message when we click on each message. This time our message details the routing component can be defined like this:

<route path="news_detail/:news_id" component={news_detail}/>

In the message list routing component there we have each message as a link:

<link to={' news_detail/${Element.timestamp} '} >{element.news}</link>

In this case our message detail component will be able to pass this . Props. The params gets the element.timestamp parameter passed to the message list component.

2 Query

<link to="/activity_publish" query={{timestamp:element.timestamp}}> Edit </link >

The routing component in the /activity_publish map can be

var  This . props.location; var timestamp = Query.timestamp;

Gets the query parameter.

With respect to param, the limitations are smaller, you can pass on as many parameters as you need, just a bit like a GET request, and the arguments passed are appended to the URL, look a little ugly, and almost without concealment.

3 State

不过还是有第三种方式的，就是state，这种方式借助了location 对象，location 对象可以简单的认为是 url 的对象形式表示，这里要提的是 location.state，每个 URL 都会对应一个 state 对象，你可以在对象里存储数据，但这个数据却不会出现在 url 中。实际上，数据被存在了 sessionStorage 中，所以这种方式简直就是query的加强版。

<link to="/activity_publish" state={{timestamp:element.timestamp}}> Edit </link >

Load on Demand

React-router Collaborative webpack can be used to implement on-demand loading of components, and this on-demand loading is completely asynchronous, which is particularly cool, you no longer need to load such a large JS file, even if the bread with many users will not even use the Web Components. You can load only those components that the user browses to as needed, and this will help you greatly reduce the time of the first screen rendering.

It's easy to do this, for example, at the beginning your route is:

... import news_detail from "./MARRIAGE_COMPONENT/ACTIVITY/NEWS_DETAIL.JSX";...classAPP extends react.component{render () {...}}; Reactdom.render ((<router history={createbrowserhistory ()}> <route path="/marriage_app"component={App}>                ...                <route path="/marriage_app/news_detail/:news_id"component={News_detail}/>                   ...

Just change it like this:

...//import News_detail from "./marriage_component/activity/news_detail.jsx";...classAPP extends react.component{render () {...}}; Reactdom.render ((<router history={createbrowserhistory ()}> <route path="/marriage_app"component={App}>                ...                <route path="/marriage_app/news_detail/:news_id"getcomponent={(Nextstate, callback) ={require.ensure ([], (Require)={Callback (NULL, Require ("./marriage_component/activity/news_detail").default)                     }) } }/>                   ...

The first component no longer needs to be imported, and Webpack will help you introduce it when you need it.

At last

This separation of the front and back of the mode of our team is particularly happy backstage, but in fact he did not know, this front-end control of all the feeling also let me very proud ah haha, later who say I cut figure I with who anxious.

Kee, React-router