Javascript 反应组件渲染两次_Javascript_Reactjs

Javascript 反应组件渲染两次

javascript reactjs

Javascript 反应组件渲染两次,javascript,reactjs,Javascript,Reactjs,所以就像标题所说的那样，出于某种原因，我的应用程序主页呈现了两次，我不知道为什么。从我的BrowserRouter开始，我调用一个JS文件，从那里我调用我的主页组件和React Router，但是我的页面呈现了两次，我不知道为什么我的浏览器路由器（index.js）：从“React”导入React 从'react dom'导入{render} 从“react router dom”导入{BrowserRouter} 从“./App”导入应用程序；渲染(( 我真的很困惑，所以任何建议都会有

所以就像标题所说的那样，出于某种原因，我的应用程序主页呈现了两次，我不知道为什么。从我的BrowserRouter开始，我调用一个JS文件，从那里我调用我的主页组件和React Router，但是我的页面呈现了两次，我不知道为什么

我的浏览器路由器（index.js）：

从“React”导入React
从'react dom'导入{render}
从“react router dom”导入{BrowserRouter}
从“./App”导入应用程序；
渲染((

我真的很困惑，所以任何建议都会有帮助！我猜可能会有问题，因为我调用的是jsx文件，而不是我路线中的js文件？
这是因为您渲染了两次，一次是在应用程序的顶层，另一次是在路线组件中（当您访问//code>时）
对于后者，您应该从路线
中删除主页
：
const Routes = () => (
    <main>
    <Switch>
        <Route exact path='/' component={() => 'Welcome to the home page'}/>
        <Route exact path='/projects' component={Projects}/>
    </Switch>
    </main>
)

const Routes=（）=>(
“欢迎访问主页”}/>
)
谢谢，这很有道理，我可以把应用程序中的那个拿出来，对吗？
const App = () => (
    <div>
        <HomePage />
        <Route />
    </div>
)

export default App;

import React from 'react';
import { Link } from 'react-router-dom';

    const HomePage = () => (
            <html>
            <ul><li>Home</li>
                <Link to='/projects'><li>Projects</li></Link>
                <li>Future Work</li>
                <li>About Me</li>
            </ul>
            <title>A Peak Into My Life</title>
            <h2>New Production Build</h2>
            <body>
            Projects Will Be Shown Here:


            <body> This is the Flinder application: </body>

            </html>
    )

export default HomePage;

const Routes = () => (
    <main>
    <Switch>
        <Route exact path='/' component={HomePage}/>
        <Route exact path='/projects' component={Projects}/>
    </Switch>
    </main>
)

const App = () => (
    <div>
        <HomePage /> {/* you are rendering it here */}
        <Route />    {/* you are also rendering HomePage within Route */}
    </div>
)

const App = () => (
    <div>
        <Route />    {/* only render HomePage within Route, when / is visited */}
    </div>
)

const Routes = () => (
    <main>
    <Switch>
        <Route exact path='/' component={() => 'Welcome to the home page'}/>
        <Route exact path='/projects' component={Projects}/>
    </Switch>
    </main>
)