не в состоянии передать параметры URL в реакции.js

Question

Я работаю над веб-приложением React.js, по некоторым причинам я не могу передать параметры URL.

Ниже приведен пример:

Маршруты:

import React from "react";
import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom';
import Helloworld from './components/helloworld/helloworld.component';
import SecondView from './components/secondview/secondview.component';
import ThirdView from "./components/thirdview/thirdview.component";

const AppRoutes = () => (
    <BrowserRouter>
        <Switch>
            <Route exact path='/' component={Helloworld}/>
            <Route path='/secondview' component={SecondView}/>
            <Route path='/thirdview' component={ThirdView}/>
            <Route path='/thirdview/:number' component={ThirdView}/>
            <Redirect from='*' to='/' />
        </Switch>
    </BrowserRouter>

);

export default AppRoutes;

Компонент Secondview

import React from 'react';
import {Link, withRouter} from 'react-router-dom';

class SecondView extends React.Component {

    constructor(props) {
        super(props);

    }

    componentDidMount() {
        console.log("I am being called SecondView component...");
    }

    render() {
        return (
            <div className={"boxDiv"}>
                <p>Second View</p>
                <Link to={{pathname: '/thirdview/7'}}> GO to third view with parameter value. </Link>
            </div>
        );
    }
}

export default withRouter(SecondView);

Компонент Thirdview:

import React from 'react';
import { Route, Link,withRouter } from 'react-router-dom';
import FourthView from "../fourthview/fourthview.component";

class ThirdView extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
    }

    render() {
        console.log(this.props.match.params);
        return (
            <div className={"boxDiv"}>
                <p>Third View</p>
                { console.log(this.props)}
                <h1>parameter passed: (#{this.props.params.number})</h1>
            </div>
        );
    }
}

export default withRouter(ThirdView);

Что я хочу, так это возможность получить /: число в моем компоненте третьего вида!Кто-нибудь знает, как этого добиться в React.js?Есть ли другие способы сделать это?

То, что я получаю, это пустой объект!

Answer 1

Я думаю, что это должно быть:

{this.props.match.params.number}

вместо

{this.props.params.number}

и вам не нужно withRouter в ThirdView и SecondView, поскольку они уже переданы в Route.

EDIT:

Поскольку вы хотите визуализировать один и тот же компонент для /thirdview и /thirdview/7, используйте необязательный параметр сопоставления параметров

 <Switch>
    <Route exact path='/' component={Helloworld}/>
    <Route path='/secondview' component={SecondView}/>
    <Route path='/thirdview/:number?' component={ThirdView}/>
    <Redirect from='*' to='/' />
 </Switch>