Question

在这里与新手联系。我想使用React Router创建一个侧面导航栏，而不是根据所单击的任何链接来渲染组件。我对如何放置浏览器路由器以及放置在哪里越来越感到困惑。

这是我的index.js文件的片段

ReactDOM.render(<Header/>, document.getElementById('header'));
ReactDOM.render(<SideBar/>, document.getElementById('sidebar'));
ReactDOM.render(<Footer/>, document.getElementById('footer'));

还有一个ID为mainBody的元素，我要在其中渲染要添加/替换的组件，具体取决于我在侧边栏上单击的内容。

我现在要更改标题元素。

以下是SideBar组件导入的组件SideNav。这将处理路由链接。

<BrowserRouter>
            <li className="st-bottom-line">
                    <Link to="/Dashboard">Dashboard </Link>
            </li>

            <li className="st-bottom-line">
                    <Link to='/Configuration'> Configuration </Link>
            </li>               
            <div>
                    <Route path="/Dashboard" render={(props) => <Heading {...props} name={`Dashboard`} />} />
                    <Route path="/Configuration" render={(props) => <Heading {...props} name={`Configuration`} />} />
            </div>
    </BrowserRouter>

您可以想象，现在，当我单击两个链接中的任何一个时，“标题”组件将出现在补充工具栏中。

我应该进行哪些更改，以便将标题显示在另一个组件中？我已经看到了无数关于sidenavs和路由的示例，但是我仍然很困惑，因为我尝试制作的结构在结构上有所不同。

提前谢谢！

Answer 1

您可能想要更改构建应用程序的方式。约定只有一个ReactDOM.render（）会呈现一个HOC组件（例如，您的应用程序组件），然后它会根据您在 BrowserRouter 中定义的 Route 来呈现各种子组件。 strong>。

这是一个实际有效的简单结构：

index.html：

<!DOCTYPE html>
<html >
  <body>
    <div id="root"></div>
  </body>
</html>

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';

ReactDOM.render(<App />, document.getElementById('root'));

App.js

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

export const App: React.FC = () => {

  return (
    <div>
        // This sidebard will be rendered on each route, because it's outside of <BrowserRouter>
        <div className="sideBar">
           <ul>
              <li className="st-bottom-line">
                    <Link to="/Dashboard">Dashboard </Link>
              </li>

              <li className="st-bottom-line">
                    <Link to='/Configuration'> Configuration </Link>
              </li>          
           </ul>
        </div>

        // This BrowserRouter will render the proper component based on the current URL (i.g. 'localhost:3000/Dashboard')
        <BrowserRouter>
                  <Route path="/Dashboard" render={(props) => <Heading {...props} name={`Dashboard`} />} />
                  <Route path="/Configuration" render={(props) => <Heading {...props} name={`Configuration`} />} />
        </BrowserRouter>
    </div>
  );
};

添加BrowserRouter以在React中的特定div中渲染组件

1 个答案: