仪表板组件的React路由器结构

Question

嗨，我是ReactJS的新开发人员。我有一个问题，想学习如何为仪表板制定路线。我的根组件是应用程序组件，它只调用我页面的仪表板。但我想调用仪表板内的不同组件，如登录、注册等。当我在任何地方使用"链接"时，我该如何做到这一点？你能在这个问题上帮我吗？

浏览器路由器的index.tsx

import {BrowserRouter} from "react-router-dom";
const app =<App /> ;
const container = (
<>
<BrowserRouter>
{app} 
</BrowserRouter>
</>
);

我的路由器App.tsx组件：

import { Route, Switch } from "react-router-dom";
import LoginDash from "../containers/login/LoginDash"
class App extends Component {
render() {
return (
<div className="App">
<Switch>
<Route path="/Login" exact component={LoginDash}></Route>
<Route path="/" exact component={LoginDash}></Route>
</Switch>
</div>
);
}
}
export default App;

我的仪表板登录Dash.tsx:

import {BrowserRouter as Router, Route,Switch} from "react-router-dom"
import LoginPart from "../../components/login/left/LoginPart";
import RegisterPart from "../../components/login/left/RegisterPart";
import AnitamionPart from '../../components/login/right/AnimationPart';
export const Login = () => {
return (
<div className="login-container">
<div className="row login-row" >
<div className="login-left-part" >
<Router>
<Switch>
<Route exact path = "/Login" component={LoginPart}></Route>
<Route exact path = "/Register" component={RegisterPart}></Route>
</Switch>
</Router>
</div>
<div className=" login-right-part" >
<AnitamionPart></AnitamionPart>
</div>
</div>
</div>
)
}
export default Login;

Answer 1

首先，您只需要在应用程序中使用一个BrowserRouter实例，因为您已经用BrowserRouter包装了App组件，这将足够

其次，如果在Routes上指定了确切的属性，则嵌套的Routes将永远不会匹配。如果组件有任何嵌套的路由定义的，请确保您没有使用具有确切道具的路由

最后，您只需要在/路由上渲染LoginDash，/Login处理可以作为嵌套路由单独完成

更新您的单个组件，如以下

import {BrowserRouter} from "react-router-dom";
// Do not render app as a constant separetely, 
const container = (
<>
<BrowserRouter>
<App />  
</BrowserRouter>
</>
);

---

import { Route, Switch } from "react-router-dom";
import LoginDash from "../containers/login/LoginDash"
class App extends Component {
render() {
return (
<div className="App">
<Route path="/" component={LoginDash}></Route>
</div>
);
}
}
export default App;

export const Login = () => {
return (
<div className="login-container">
<div className="row login-row" >
<div className="login-left-part" >
<Switch>
<Route exact path = "/Login" component={LoginPart}></Route>
<Route exact path = "/Register" component={RegisterPart}></Route>
</Switch>
</div>
<div className=" login-right-part" >
<AnitamionPart></AnitamionPart>
</div>
</div>
</div>
)
}
export default Login;

工作演示