Javascript 如何在React中实现路由？

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

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

我的注册组件

我的App.js文件

---

我真的希望在使用链接之前首先在地址栏中键入路径，然后进入导入的组件页面

看起来您正试图从请求/中获得结果，但什么也没有出现

我用codesandbox中的类似代码为您详细阐述了一个示例

我看到的问题是，您需要将主组件传递给/route

---

希望我的示例能有所帮助。

您是否正在尝试从react router dom使用BrowserRouter？或者来自react Router dom的路由器。你能添加所有的导入，这将有助于找出你的问题所在。嗨@Alejandrogarciaangulada，看看我编辑的帖子。它显示了现在所有的进口。谢谢路由器部分对我来说很好。你能详细说明你问题的这一部分吗：我导入的组件显示在索引页面上，但我应该看到一个新页面？你是说你没想到会看到页面刷新？还是组件显示不正确？嗨，Alejandro&Claire，感谢您的输入和探究性问题。我开始意识到我正在导入并传递Home组件，但我并没有真正定制它，因为我使用的是index.css中的样式，这影响了整个应用程序。

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>
)

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>
    );
  }
}

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