Reactjs 在页眉和页脚上调用BrowserRouter时，内容显示两次_Reactjs_React Router

Reactjs 在页眉和页脚上调用BrowserRouter时，内容显示两次

reactjs

Reactjs 在页眉和页脚上调用BrowserRouter时，内容显示两次,reactjs,react-router,Reactjs,React Router,大家好，我正在学习英语。我已经在Headers.js上为路由编写了代码，并添加了显示在导航栏上的链接。我想在页脚上显示相同的链接，所以我创建了footers/index.js。我已经在src/index.js上导入了页脚/index.js和页眉，不幸的是，页面内容在根页面上显示了两次，一次显示页眉，另一次显示页脚，如此url所示： Headers.js 从“React”导入React；从“react router dom”导入{BrowserRouter，Route，Switch，Link}

大家好，我正在学习英语。我已经在Headers.js上为路由编写了代码，并添加了显示在导航栏上的链接。我想在页脚上显示相同的链接，所以我创建了footers/index.js。我已经在src/index.js上导入了页脚/index.js和页眉，不幸的是，页面内容在根页面上显示了两次，一次显示页眉，另一次显示页脚，如此url所示：

Headers.js

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Switch，Link}；
从“./pages/About”导入关于；
从“./pages/Contact”导入联系人；
从“./pages/Home”导入主页；
导出默认值（）=>{
返回(

主页（当前）
接触
关于

)
}

Footers.js

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Switch，Link}；
从“../pages/About”导入关于；
从“../pages/Contact”导入联系人；
从“../pages/Home”导入主页；
导入“./index.css”
导出默认类页脚扩展React.Component{
render（）{
返回(

家
接触
关于

文本2
文本3
);
}
}

src/index.js

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./Headers”导入标题；
从“./Footers”导入页脚；
ReactDOM.render(
，document.getElementById（'root'））
);

页眉和页脚有正确的菜单链接和快速链接，但主组件显示两次，当我单击菜单链接时，组件显示在顶部部分，当单击页脚链接时，组件显示在页脚下方的第二部分，如屏幕截图所示。我怎样才能解决这个问题？任何解决方案都将不胜感激，谢谢

将浏览器路由器移动到index.js，这将使其更加一致：

ReactDOM.render(
  <BrowserRouter>
     <div>
       <Headers/>
       <Route exact path="/" component={Home} />
       <Route exact path="/contact" component={Contact} />
       <Route exact path="/about" component={About} />
       <Footers/>
     </div>
  </BrowserRouter>
  , document.getElementById('root')
);

ReactDOM.render(
，document.getElementById（'root'））
);

从页眉和页脚中删除路由器。

将浏览器路由器移动到index.js，这将使其更加一致：

ReactDOM.render(
  <BrowserRouter>
     <div>
       <Headers/>
       <Route exact path="/" component={Home} />
       <Route exact path="/contact" component={Contact} />
       <Route exact path="/about" component={About} />
       <Footers/>
     </div>
  </BrowserRouter>
  , document.getElementById('root')
);

ReactDOM.render(
，document.getElementById（'root'））
);

从页眉和页脚中删除路由器

为什么组件渲染两次

因为您在两个不同的组件中使用相同的路由部分，所以在页眉内部路由将单独工作，在页脚内部路由将单独工作，并且两个组件将根据路径呈现一个子组件，这就是为什么两个组件

解决方案：

您需要重新构造路由部分，而不是在多个组件中定义相同的路由，而是在全局空间（如

index.js

文件）中定义它们，并在不同的组件中使用它们的链接

使用BrowserRouter一次，将主要路由放在

index.js

文件中

索引文件：

ReactDOM.render(
    <BrowserRouter>
        <div>
            <Headers/>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/contact" component={Contact} />
                <Route exact path="/about" component={About} />
            </Switch>
            <Footers/>
        </div>
    </BrowserRouter>, document.getElementById('root')
);

export default () => (
    <div>
        <div className="navbar navbar-default">
            <div className="container">
                <div className="navbar-header pull-left">
                  <ul className="nav navbar-nav">
                    <li className="active"><Link to="/">Home<span class Name="sr-only">(current)</span></Link></li>
                    <li><Link to="/contact">Contact</Link></li>
                    <li><Link to="/about">About</Link></li>
                  </ul>
                </div>
            </div>
        </div>
    </div>
)

export default class Footers extends React.Component {
    render() {
        return (
            <div className="footer-section">
                <div className="container">
                    <div className="row">
                        <div className="col-sm-4">
                            <div>
                                <ul>
                                  <li><Link to="/">Home</Link></li>
                                  <li><Link to="/contact">Contact</Link></li>
                                  <li><Link to="/about">About</Link></li>
                                </ul>
                            </div>

                            <div className="col-sm-4">
                                <h2>Text 2nd</h2>
                            </div>
                            <div className="col-sm-4">
                                <h2>Text 3rd</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
，document.getElementById（'root'））
);

现在，所有这些路由都可以在页脚和页眉组件中访问。要呈现它们，请使用页眉和页脚中的链接

标题文件：

ReactDOM.render(
    <BrowserRouter>
        <div>
            <Headers/>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/contact" component={Contact} />
                <Route exact path="/about" component={About} />
            </Switch>
            <Footers/>
        </div>
    </BrowserRouter>, document.getElementById('root')
);

export default () => (
    <div>
        <div className="navbar navbar-default">
            <div className="container">
                <div className="navbar-header pull-left">
                  <ul className="nav navbar-nav">
                    <li className="active"><Link to="/">Home<span class Name="sr-only">(current)</span></Link></li>
                    <li><Link to="/contact">Contact</Link></li>
                    <li><Link to="/about">About</Link></li>
                  </ul>
                </div>
            </div>
        </div>
    </div>
)

export default class Footers extends React.Component {
    render() {
        return (
            <div className="footer-section">
                <div className="container">
                    <div className="row">
                        <div className="col-sm-4">
                            <div>
                                <ul>
                                  <li><Link to="/">Home</Link></li>
                                  <li><Link to="/contact">Contact</Link></li>
                                  <li><Link to="/about">About</Link></li>
                                </ul>
                            </div>

                            <div className="col-sm-4">
                                <h2>Text 2nd</h2>
                            </div>
                            <div className="col-sm-4">
                                <h2>Text 3rd</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

导出默认值（）=>(

主页（当前）
接触
关于

)

页脚文件：

ReactDOM.render(
    <BrowserRouter>
        <div>
            <Headers/>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/contact" component={Contact} />
                <Route exact path="/about" component={About} />
            </Switch>
            <Footers/>
        </div>
    </BrowserRouter>, document.getElementById('root')
);

export default () => (
    <div>
        <div className="navbar navbar-default">
            <div className="container">
                <div className="navbar-header pull-left">
                  <ul className="nav navbar-nav">
                    <li className="active"><Link to="/">Home<span class Name="sr-only">(current)</span></Link></li>
                    <li><Link to="/contact">Contact</Link></li>
                    <li><Link to="/about">About</Link></li>
                  </ul>
                </div>
            </div>
        </div>
    </div>
)

export default class Footers extends React.Component {
    render() {
        return (
            <div className="footer-section">
                <div className="container">
                    <div className="row">
                        <div className="col-sm-4">
                            <div>
                                <ul>
                                  <li><Link to="/">Home</Link></li>
                                  <li><Link to="/contact">Contact</Link></li>
                                  <li><Link to="/about">About</Link></li>
                                </ul>
                            </div>

                            <div className="col-sm-4">
                                <h2>Text 2nd</h2>
                            </div>
                            <div className="col-sm-4">
                                <h2>Text 3rd</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

导出默认类页脚扩展React.Component{
render（）{
返回(

家
接触
关于

文本2
文本3
);
}
}