React-router使用实例

1.目录结构

React-router
    node_modules
    public
    src
        page
            About.js
            Home.js
            Topic.js
            Topics.js
        App.js
        index.js
    package-lock.json
    package.json

index.js代码

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

App.js代码

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link
  } from 'react-router-dom';
import Topics from './page/Topics';
import Home from './page/Home';
import About from './page/About';
class App extends Component {
  render() {
    return (
        
        

          

            
Home
            
About
            
Topics
          
          

          
          
          
        
      
    );
  }
}

export default App;

3.About.js代码

import React, { Component } from 'react';
class About extends Component {
    render() {
        return (
            

                
About
            
        )
    }
    
}
export default About;

4.Home.js代码

import React, { Component } from 'react';
class Home extends Component {
    render() {
        return (
            

                
Home
            
        )
    }
    
}

export default Home;

5.Topic.js代码

import React, { Component } from 'react';
class Topic extends Component{
    render(){
        console.log(this);
        return (
            

                
{this.props.match.params.topicId}
            
        )
    }
}
export default Topic;

6.Topics.js代码

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link
  } from 'react-router-dom';
import Topic from './Topic';
class Topics extends Component {
    render() {
        console.log(this);
        return (
            

                
Topics
                

                    

                        
                        Rendering with React
                         
                    
                    

                        
                        Components
                        
                    
                    

                        
                        Props v. State
                        
                    
 
                

                
                 (
                    
Please select a topic.
                )}/> 
            
        )
    }
    
}

export default Topics;