如何在 ReactJS 的两个组件中使用 Route 和 Link

Question

This will be my full view both components together 我创建了两个组件，一个用于侧栏，一个用于主视图。我在侧边栏组件中有我的链接，在主视图组件中有路由。我的问题是我需要将它们都放在一个路由器（BrowserRouter）中还是我可以在两个组件中使用两个路由器。

当我像这样在同一个路由器中使用路由和链接时，它工作正常。 这是我的主视图

render() {
        return (
            <div > 
               <Router>
                <SideBar  />
                <div className="content-page">
                    <div className="content">
                        <TopBar/>


                                <Route exact path={'/home'} component={Index}/>
                                <Route exact path={'/user'} component={User}/>

                        </Router>
                    </div>
                    <Footer/>
                </div>
             </Router>
            </div>
        );
    }

当我使用它时，是否可以在两个组件中使用两个路由器它不起作用。 这是我的主视图并包含链接。

render() {
        return (
            <div >
                <SideBar  />
                <div className="content-page">
                    <div className="content">
                        <TopBar/>
                        <Router>

                                <Route exact path={'/home'} component={Index}/>
                                <Route exact path={'/user'} component={User}/>

                        </Router>
                    </div>
                    <Footer/>
                </div>

            </div>
        );
    }

这是我的侧边栏

render() {
        return (
            <div>
<Router>
                 <Link to={'/home'} >Home</Link>
</Router>
            </div>
}

是否可以使用两个路由器（BrowserRouter）或者我只能使用一个。如果我只能使用一个，那么在其中使用大量内容是否可以。

Answer 1

使用 react router dom

的演示应用程序

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
        <hr />
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

为了更好地理解概念，请尝试通过官方reacttraining.com