Reactjs React路由始终加载相同的组件

我正在尝试将路由添加到我的简单应用程序：

import Home from './componantes/Home'
import Contact from './componantes/Contact'
import Aboutus from './componantes/Aboutus'
import { Route, Link, BrowserRouter as Router} from 'react-router-dom'
const routing = (
    <Router>
      <div>
        <Route path="/" component={Home} />
        <Router path="/contact" component={Contact} />
        <Router path ="/about" component={Aboutus} />
      </div>
    </Router>
  )

ReactDOM.render(routing, document.getElementById('root'));

---

这里出了什么问题？

对于路线，您可以使用交换机。交换机决定调用哪个路由器，第二个路由器将以有序的方式将您的组件放入底部的home中。因此，我们的应用程序将在/route之前检查/contact和/about。您可以在官方文档上查看有关react router dom的更多信息

import Home from './componantes/Home'
import Contact from './componantes/Contact'
import Aboutus from './componantes/Aboutus'
import { Route, Link, BrowserRouter as Router , Switch } from 'react-router-dom'
const App = (
    <Router>
      <Switch>
        <Route path="/contact" component={Contact} />
        <Route path ="/about" component={Aboutus} />
        <Route path="/" component={Home} />
      </Switch>
    </Router>
  )

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

从“./components/Home”导入主页
从“./Componentes/Contact”导入联系人
从“./Componentes/Aboutus”导入Aboutus
从“react Router dom”导入{Route，Link，BrowserRouter as Router，Switch}
常量应用=(
)
ReactDOM.render（，document.getElementById（'root'））//需要改变

对于可以使用交换机的路由。交换机决定调用哪个路由器，第二个路由器将以有序的方式将您的组件放入底部的home中。因此，我们的应用程序将在/route之前检查/contact和/about。您可以在官方文档上查看有关react router dom的更多信息

import Home from './componantes/Home'
import Contact from './componantes/Contact'
import Aboutus from './componantes/Aboutus'
import { Route, Link, BrowserRouter as Router , Switch } from 'react-router-dom'
const App = (
    <Router>
      <Switch>
        <Route path="/contact" component={Contact} />
        <Route path ="/about" component={Aboutus} />
        <Route path="/" component={Home} />
      </Switch>
    </Router>
  )

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

从“./components/Home”导入主页
从“./Componentes/Contact”导入联系人
从“./Componentes/Aboutus”导入Aboutus
从“react Router dom”导入{Route，Link，BrowserRouter as Router，Switch}
常量应用=(
)
ReactDOM.render（，document.getElementById（'root'））//需要改变

另一个选项是为您的回家路线使用

精确的

道具，因此只有当url为

/

时才会触发。此外，

布线

必须是有效的react组件，并相应地呈现：

const Routing = () =>  (
    <Router>
        <Route exact path="/" component={Home} />
        <Router path="/contact" component={Contact} />
        <Router path ="/about" component={Aboutus} />
    </Router>
  )

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

const路由=（）=>(
)
ReactDOM.render（，document.getElementById（'root'））

另一个选项是为您的回家路线使用

精确的

道具，因此只有当url为

/

时才会触发。此外，

布线

必须是有效的react组件，并相应地呈现：

const Routing = () =>  (
    <Router>
        <Route exact path="/" component={Home} />
        <Router path="/contact" component={Contact} />
        <Router path ="/about" component={Aboutus} />
    </Router>
  )

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

const路由=（）=>(
)
ReactDOM.render（，document.getElementById（'root'））

您需要将道具添加到

/

路线中，以告知您只希望它在位置完全匹配时匹配

此外，您在路由器定义中有输入错误，而不是路由器，您需要使用路由进行联系和了解我们

因此，必须纠正这些行：

<Router path="/contact" component={Contact} /> 
<Router path ="/about" component={Aboutus} />

您需要将道具添加到

/

路线，以告知您只希望它在位置完全匹配时匹配

此外，您在路由器定义中有输入错误，而不是路由器，您需要使用路由进行联系和了解我们

因此，必须纠正这些行：

<Router path="/contact" component={Contact} /> 
<Router path ="/about" component={Aboutus} />

---

您好，我尝试了相同的路径，但当我尝试访问

/contact

或

/about

时，它会显示空页面。组件中都存在简单的

h1

返回问题您的

联系人

和

Aboutus

组件可能也有问题。您好，我尝试了同样的方法，但当我尝试访问

/Contact

或

/about

时，它会显示空页。组件中都有简单的

h1

返回问题您的

联系人

和

关于组件

可能也有问题。请确保您使用的是正确的主页链接，我已更新了代码并添加了

开关

，但现在当我尝试访问

/Contact

时，它会显示空白页，并且控制台上现在出现错误确保您使用的是正确的主页链接我已更新了我的代码并添加了

开关

，但现在当我尝试访问

/contact

时，它显示空白页，并且控制台上现在出现错误您的主页和关于我们的代码都有您的主页和关于我们的代码