如何在 React 中实现路由？

Question

我是 React 新手，在实现路由时遇到问题。我想我已经设置好了所有东西，但是当我尝试路由时，我导入的组件会显示在索引页面上，但我应该会看到一个新页面。

我尝试定义所有路径并导入所需的组件

我的注册组件

export const SignUp = () => (

    <Container>
        <h2>Sign Up</h2>
        <Form className="form">
            <Col>
                <FormGroup>
                    <Label>First Name</Label>
                    <Input 
                        type="text" 
                        name="firstName" 
                        id="firstName" 
                        placeholder="First name..."
                    />
                     <Label>Second Name</Label>
                    <Input 
                        type="text" 
                        name="secondName" 
                        id="secondName" 
                        placeholder="Second name..."
                    />
                     <Label>Email</Label>
                    <Input 
                        type="email" 
                        name="email" 
                        id="email" 
                        placeholder="Email..."
                    />
                </FormGroup>
            </Col>
            <Button>Submit</Button>
        </Form>
    </Container>
)

我的 App.js 文件

import React from 'react';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import { Layout} from './components/Layout'; 
import { NavigationBar} from './components/NavBar'
import {Footer} from './components/Footer';
import {SignUp} from './components/Signup'; 
import { SignIn} from './components/Signin';
import { Home } from './components/Home';
class App extends React.Component {

  render(){
    return (
      <React.Fragment>
        <NavigationBar/>
        <Layout> 
        <Router>
          <Switch>
            <Route exact  path="/"/>
            <Route  path="/signup" component={SignUp}/>
            <Route  path="/signin" component={SignIn}/>
          </Switch>
        </Router>
         <Footer/>
        </Layout>
      </React.Fragment>
    );
  }
}

我真的希望在使用链接之前先在地址栏中输入路径并进入导入的组件（页面）

Answer 1

看起来您正试图通过请求 / 获得结果，但没有任何结果。

我为你详细阐述了一个例子，codesandbox 中有类似的代码。

https://codesandbox.io/embed/vibrant-paper-knmqj

我可以看到的问题是您需要将Home 组件传递给/ 路由。

<Route exact path="/" component={Home} />

希望我的例子有所帮助。