如何在 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>
)

我的应用.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

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

我为您详细阐述了一个示例，在代码沙箱中使用了类似的代码。

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

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

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

希望我的例子有所帮助。