How to build a demo for React routing? Detailed introduction to react building routing demo-JS Tutorial-php.cn

How to build a demo for React routing? Detailed introduction to react building routing demo

寻∝梦

Release： 2018-09-11 11:45:43

Original

2639 people have browsed it

This article mainly talks about the details about react building a routing demo. There is also an introduction to react-router in the project. Let’s take a look at this article.

There are many introductions to react-router on the Internet. It is necessary to talk about it here. Among them, react in the project -router and react-router-dom have the same functions, just quote one.

1. Introduction to react-router4.0 or above.

I found a well-written article, so I need to talk about it here. Please read: A first look at React Router 4.0

2. The environment to be built

a. Use create-react-app to build

b. The versions are as follows:

{
  "name": "react-project-router",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Copy after login

3. File directory structure

How to build a demo for React routing? Detailed introduction to react building routing demo

4、index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import './index.css';
import Root from './router/Routes';
import registerServiceWorker from './registerServiceWorker';
const mountNode = document.getElementById('root');
ReactDOM.render(
    <browserrouter>
        <root></root>
    </browserrouter>,
    mountNode
);
registerServiceWorker();

Copy after login

5、App.js

/*
   App 应用总容器
*/
import React, { Component } from 'react';

class App extends Component {
    render() {
        return <p>{this.props.children}</p>;
    }
}
export default App;

Copy after login

6, Router file, routing configuration

/*
   Root, Router 配置
*/
import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import App from './../App';
import Test from './../containers/Test';
import Home from './../containers/Home';
import Message from './../containers/Message';
const Root = () => (
   <p>
      <switch>
         <route> (
               <app>
                  <switch>
                     <route></route>
                     <route></route>
                     <route></route>
                     <route></route>
                      {/*路由不正确时，默认跳回home页面*/}
                     <route> <redirect></redirect>} />
                  </route></switch>
               </app>
            )}
         />
      </route></switch>
   </p>
);
export default Root;

Copy after login

7, related component code (if you want to see more, go to the PHP Chinese websiteReact Reference Manual column to learn)

/*
   Home 主页
*/
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Home extends Component {
   render() {
      return (
          <p>
              {/*search,state可以自定义，获取方法：this.props.location.search，this.props.location.state*/}
              <link>
                  点击跳转到路由参数search，state使用
              
          </p>
      );
   }
}
export default Home;
/*
   Test 主页
*/
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Test extends Component {
    constructor (props) {
        super(props)
    }
   render() {
       return (
           <p>
               </p><p>search:{this.props.location.search} </p>
               <p>state:{this.props.location.state.mold} </p>
               <p>  this.props.history.goBack()}>返回上一页</p>
               <p> this.props.history.push('/message/12')}>message页面</p>
           
       );
   }
}
export default Test;
/*
   Message 主页
*/
import React, { Component } from 'react';
class Message extends Component {
    constructor (props) {
        super(props)
    }
   render() {
       return (
           <h3>Message{this.props.match.params.id}</h3>
       );
   }
}
export default Message;

Copy after login

8. The effect is as follows

How to build a demo for React routing? Detailed introduction to react building routing demo

This article ends here (think To learn more, go to the PHP Chinese website React User Manual column to learn). If you have any questions, you can leave a message below.

The above is the detailed content of How to build a demo for React routing? Detailed introduction to react building routing demo. For more information, please follow other related articles on the PHP Chinese website!