Question

React 路由总是加载相同的组件

2020-01-17

533

reactjs react-router

我试图将路由添加到我的简单应用程序中：

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'));

但无论我尝试访问 /contact 或 /about 哪个 URL，它总是将我带到主页组件。

我的 aboutus 组件：

import React from 'react'

export default class Contact extends React.Component{
    render() {           
        return (
            <h1>Contact componant</h1>
        )
    }
}

这里出了什么问题？

Answer 1

对于路由，您可以使用 Switch。Switch 决定调用哪个路由器，第二个路由器将您的组件按顺序放置在底部，例如 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

Answer 2

您需要将 exact 属性添加到 / 路由，以表明您只希望它在位置完全匹配时匹配。

此外，您在路由器定义中存在拼写错误，您需要使用路由来联系和关于我们，而不是路由器。

因此必须更正这些行：

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

<Router>
      <div>
        <Route path="/" exact component={Home} />
        <Route path="/contact" component={Contact} />
        <Route path ="/about" component={Aboutus} />
      </div>
    </Router>

Codesandbox

Answer 3

另一个选项是将 exact 属性用于您的主路由，因此只有当 url 为 / 时才会触发。此外， routing 必须是有效的 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'))