React路由器始终呈现'/'路径

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试使用v4 react路由器，但路由器始终呈现初始路径（'/'）。 我使用React路由器始终呈现'/'路径

react: ^16.2.0

react-dom: ^16.2.0

react-router-dom: ^4.2.2

当我试图渲染/＃/帐户，它呈现的，而不是账户主页。

import React from "react"  
import ReactDOM from "react-dom"  
import { BrowserRouter as Router, Route } from 'react-router-dom'  
import Home from "./components/Home/Home";  
import Account from "./components/Account/Account";  
import Layout from "./components/Layout";  
const app = document.getElementById('app');  
ReactDOM.render( 
    <Router>  
     <div>  
     <Route exact path="/" render={() => (<div>Home</div>)} />  
     <Route path="/account" render={() => (<div>Account</div>)} />  
     </div>  
    </Router>,  
    app  
)

回答：

其中之一来解决这个问题的办法是让从反应路由器-DOM使用<Switch>，您可以导入它想：

import {Switch} from 'react-router-dom';

，然后包裹你的<Route><Switch>我认为它是一个好主意，把"/"在最后，并给予默认组件，如：

<Router> 
     <div> 
     <Switch> 
      <Route path="/account" render={() => (<div>Account</div>)} /> 
      <Route exact path="/" render={() => (<div>Home</div>)} /> 
      <Route component={NoMatch}/> 
     </Switch> 
    </div> 
    </Router>

你可以阅读更多关于<Switch>Here

以上是 React路由器始终呈现'/'路径 的全部内容， 来源链接： utcz.com/qa/258862.html

回到顶部