如何在带有类的 React TypeScript 中生成自定义 url

Question

我看过一些堆栈溢出的话题，但他们总是使用函数组件。我想知道如何在 TypeScript 中生成自定义 url，例如带有类组件的 http://localhost:3000/user/:userUid。 我试试这个：

Route 中的路径是 '/user/:userUID'

interface IURLInfo {
    userUID: string
}

interface IProps extends RouteComponentProps<IURLInfo> {

}

interface IState {

}

class ShipsBoyBoatDashboard extends React.Component<IProps, IState> {

    constructor(props: IProps) {
        super(props)
    }

    componentDidMount() {

        userIsLogged()

        firebaseAuth().onAuthStateChanged(function(user) {
            if(user) {

            }
        })
    }

    render() {

        return(
            <div className="ship-dashboard-container">
                <p>{this.props.match.params.userUID}</p>
            </div>
        )

    }
}

export default withRouter(ShipsBoyBoatDashboard)

但是 React 给我发回一个错误：TypeError: this.props.match is undefined

更新 这是我的 index.tsx：

import './index.css';
import App from './App';
import { Router } from 'react-router-dom';
import history from './utils/history';


ReactDOM.render(
  <React.StrictMode>
    <Router history={history}>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

还有我的 App.tsx（即使是没用的）

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import BaseLayout from './utils/baseLayout';
import routes from './routes';

export default class extends React.Component {
  state = {
    showNavbar: true
  }

  showNavbar = (showNavbar = true) => {
    this.setState({ showNavbar });
  }

  render() {
    return (
      <BaseLayout showNavbar={this.state.showNavbar}>
        <Switch>
          {routes.map(route => (
            <Route
              exact
              key={route.path}
              path={route.path}
              render={() => (
                <route.component
                  showNavbar={() => this.showNavbar(route.showNavbar)}
                />
              )}
            />
          ))}
        </Switch>
      </BaseLayout>
    );
  }
}

Answer 1

问题在于您使用了 render 道具。请在此处查看documentation。

您传递给render 的函数将react-router 注入的路由道具（即match 道具和其他道具）作为参数，但是您需要手动将这些道具传递给您正在渲染的组件在函数中。这不会自动发生。

这与使用 component 道具不同，其中路由道具 由 react-router 自动注入到组件中 - 这可能是您在其他示例中看到的。

试试这个

render={(routeProps) => ( // routeProps is an argument to the render function
  <route.component
    showNavbar={() => this.showNavbar(route.showNavbar)}
    {...routeProps} // you need to pass them through to the rendered component
  />
)}

或者，更直接地演示通过match...

render={({ match }) => (
  <route.component
    showNavbar={() => this.showNavbar(route.showNavbar)}
    match={match}
  />
)}