javascript - 使用 Router 的组件未显示在 Button 单击事件上

问题描述

我正在实现用户可以在两个选项之间进行选择的页面：按钮 1 重定向到TestOption.js或按钮 2 重定向到 TestOption2（目前，TestOption用于测试目的）。默认页面是SelectionPage.

问题在于按钮单击事件。在SelectionPage，我正在使用onClick={this.props.clickBtn}. 当我单击该按钮时，它会打开一个新页面，其中Header只有，但没有Main. 我认为问题是由Router我在Main. 但我不知道如何解决它。

有人可以指出我的错误吗？

谢谢。

App.js 的代码：

import React, { Component } from 'react';
import './App.css';
import TestOption from './components/TestOption';
import SelectionPage from './components/SelectionPage';

class App extends Component {

  state = {
    renderView: 0
  };

  clickBtn = e => {
    console.log(e.target.value);
    this.setState({
      renderView: +e.target.parentNode.value
    });
  };


  render() {

    switch (this.state.renderView) {
      case 1:
        return (
          < TestOption />
        );
      case 2:
        return (
          < TestOption />
        );
      default:
        return (
          < SelectionPage clickBtn={this.clickBtn} />
        );
    }
  }

}

export default App;

SelectionPage.js 的代码：

import React, {Component} from 'react';
import Button from '@material-ui/core/Button';
import Grid from "@material-ui/core/Grid";
import CssBaseline from "@material-ui/core/CssBaseline";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import withStyles from "@material-ui/core/styles/withStyles";


const styles = theme => ({
  card: {
    minWidth: 350
  },
  button: {
    fontSize: "12px",
    margin: theme.spacing.unit,
    minWidth: 350
  },
  extendedIcon: {
    marginRight: theme.spacing.unit
  },
  title: {
    fontSize: '20px',
    minWidth: 350,
    margin: theme.spacing.unit
  },
});


class SelectionPage extends Component {

  render() {
    const { classes } = this.props;

    return (
      <React.Fragment>
        <CssBaseline />
        <Grid
          container
          spacing={0}
          direction="column"
          alignItems="center"
          justify="center"
          style={{ minHeight: "100vh" }}
        >
          <Card className={classes.card}>
            <Typography align="center" className={classes.title}>
              Select the option
            </Typography>
            <CardContent>
              <Grid item xs={3}>
                <Button
                  variant="contained"
                  size="medium"
                  color="primary"
                  className={classes.button}
                  value="1"
                  onClick={this.props.clickBtn}
                >
                  Option 1
                </Button>
              </Grid>
              <Grid item xs={3}>
                <Button
                  variant="contained"
                  size="medium"
                  color="primary"
                  className={classes.button}
                  value="2"
                  onClick={this.props.clickBtn}
                >
                  Option 2
                </Button>
              </Grid>
            </CardContent>
          </Card>
        </Grid>
      </React.Fragment>
    );
  }
}

export default withStyles(styles)(SelectionPage);

TestOption的代码：

import React, { Component } from 'react';
import './../App.css';
import { Header } from './Header';
import { Main } from './Main';


class TestOption extends Component {

  render() {

    return (
      <div className="App">
        <div className="Site-content">
          <div className="App-header">
            <Header />
          </div>
          <div className="main">
              <Main />
          </div>
        </div>
      </div>
    );
  }
}

export default TestOption;

Main.js 的代码：

import '../App.css';
import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { Tree } from './Tree';
import { Tabular } from './Tabular';

export function Main() {
    return (
        <div>
            <Router>
                  <Route path='/.' component={Tree} />
                  <Route path='/tabular' component={Tabular} />
            </Router>
        </div>
    )
}

标签： javascriptreactjs

javascript - 使用 Router 的组件未显示在 Button 单击事件上

问题描述

解决方案

推荐阅读