Блог

Я новичок в React, и я хочу реализовать логические условия в моем переключателе в событии onClick, у меня есть 3 маршрута. Если я выберу математику, направьте ее на Math.js после его отправки. Если я выберу английский, перенаправьте его на English.js после его отправки. Если я выберу Science, направьте его в Science.js после его отправки.

     import React, { useEffect } from 'react'
    import { useForm } from "react-hook-form";
    
    function Login() {
    
        const { register, handleSubmit, setValue} = useForm();
    
        const onSubmit = (data, event) => {
            event.target.reset();
            console.log(data)
        }
    
        useEffect(() => {
            register({name: "subject"});
            register({name: "firstname"});
            register({name: "lastname"});
        }, [register]);
    
        return (
            <div>
                <form onSubmit={handleSubmit(onSubmit)}>
                    <br />
                    <label>
                        <input type="radio" value="english" name="subject" onChange={e => setValue("subject", e.target.value)} />
                        english
                    </label>
                    <label>
                        <input type="radio" value="math" name="subject" onChange={e => setValue("subject", e.target.value)} />
                        math
                    </label>
                    <label>
                        <input type="radio" value="science" name="subject" onChange={e => setValue("subject", e.target.value)} />
                        science
                    </label>
                    <br />
                    <br />
                    <label>
                        First Name:
                        <input type="text" name="firstname" onChange={e => setValue("firstname", e.target.value)} />
                    </label>
                    <br />
                    <label>
                        Last Name:
                        <input type="text" name="lastname" onChange={e => setValue("lastname", e.target.value)} />
                    </label>
                    <br />
                    <input type="submit" value="Submit" onClick={handleSubmit} />
                </form>
            </div>
        )
    }

export default Login
  

Я хочу перенаправить на выбранный мной переключатель.

 import React, { Component } from 'react';
import './App.css';
import { Router, Switch, Route } from 'react-router-dom';
import { history } from './helper';
import Login from './components/Login';
import English from './components/English';
import Math from './components/Math';
import Science from './components/Science';

class App extends Component {
  render() {
    return(
      <Router history={history}>
        <div className="App">
            <Switch>
              <Route path="/" exact component={Login} />
              <Route path="/math" component={Math} />
              <Route path="/science" component={Science} />
              <Route path="/english" component={English} />
            </Switch>
        </div>
      </Router>
    )

  }
}

export default App;