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(<App/>, 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 (
        <Router>
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/topics">Topics</Link></li>
          </ul>
          <hr/>
          <Route exact path="/" component={Home}/>
          <Route path="/about" component={About}/>
          <Route path="/topics" component={Topics}/>
        </div>
      </Router>
    );
  }
}

export default App;

3.About.js代码

import React, { Component } from 'react';
class About extends Component {
    render() {
        return (
            <div>
                <h2>About</h2>
            </div>
        )
    }
    
}
export default About;

4.Home.js代码

import React, { Component } from 'react';
class Home extends Component {
    render() {
        return (
            <div>
                <h2>Home</h2>
            </div>
        )
    }
    
}

export default Home;

5.Topic.js代码

import React, { Component } from 'react';
class Topic extends Component{
    render(){
        console.log(this);
        return (
            <div>
                <h3>{this.props.match.params.topicId}</h3>
            </div>
        )
    }
}
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 (
            <div>
                <h2>Topics</h2>
                <ul>
                    <li>
                        <Link to={`${this.props.match.url}/rendering`}>
                        Rendering with React
                        </Link> 
                    </li>
                    <li>
                        <Link to={`${this.props.match.url}/components`}>
                        Components
                        </Link>
                    </li>
                    <li>
                        <Link to={`${this.props.match.url}/props-v-state`}>
                        Props v. State
                        </Link>
                    </li> 
                </ul>

                <Route path={`${this.props.match.url}/:topicId`} component={Topic}/>
                <Route exact path={this.props.match.url} render={() => (
                    <h3>Please select a topic.</h3>
                )}/> 
            </div>
        )
    }
    
}

export default Topics;