时间戳

首页 > 解决方案 > 单击按钮时使用 React 导航到新页面

javascript - 单击按钮时使用 React 导航到新页面

问题描述

我想从欢迎页面导航到登录页面，我创建了 2 个页面，现在我想在单击登录按钮时导航到登录页面。

这是欢迎页面代码：

import React from 'react';
import Button from '@material-ui/core/Button';
import Box from '@material-ui/core/Box'

const useStyles = makeStyles({
    logo: {
        width: '120px',
        height: '120px',
    },
    loginButton: {
        right: '50px',
    }
});

export default function Welcome() {
const classes = useStyles()
return (
        <div>
        <Box style={{ width: '100%' }} display="flex" justifyContent="center" alignItems="center" >

            <Box flexGrow={1}>
            <img src={require('../logo.svg')} className={classes.logo} />
            </Box>

            <Box>
            <Button variant="contained" color="primary" className={classes.loginButton}>
                Login
            </Button>
            </Box>

        </Box>
</div>

这是登录组件（尚未完成）：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles((theme) => ({
    root: {
      '& > *': {
        margin: theme.spacing(1),
        width: '25ch',
      },
    },
  }));

export default function Login() {
    const classes = useStyles();
    return (
        <div>
            <TextField id="email" label="Enter email" />
            <TextField id="password" label="Enter password" />
        </div>
    )
}

PS：我正在使用反应材料 ui 库

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

您的评论回复非常接近：

<Router> <Route path="/login" component={Login}> <Button variant="contained" color="primary" className={classes.loginButton}> Login </Button> </Route></Router>

对我有用的方法是制作一个包含我的路由器的常量的路由器文件。它看起来像这样：

路由器.js

import React from "react";
import { Route } from "react-router-dom";
import Login from " *wherever your login is* ";
import Welcome from " *wherever your welcome is* ";

const Router = () => (
  <div>
    <Route exact path="/" component={Welcome} />
    <Route exact path="/login" component={Login} />
  </div>
);

export default Router;

然后，您将App.js文件中的唯一内容设置为路由器：

应用程序.js

import Router from " *where you put your router file* ";

class App extends Component {
  render() {
    return (
      <div>
         <Router>
            <Router />
         </Router>
      </div>
    );
  }
}

export default App;

最后，您可以让您的按钮链接到路由器中指定的 url：

欢迎.js

import React from 'react';
import Button from '@material-ui/core/Button';
import Box from '@material-ui/core/Box';
import { Link } from "react-router-dom"; 
//^this import is important

...

<Button component={Link} to='/login' variant="contained" color="primary" className={classes.loginButton}>
Login
</Button>

那应该会让你失望。我对此也很陌生，所以请告诉我是否有问题。

推荐阅读