Question

对于大多数人来说，这可能是一个简单的问题，但是，为什么当我更新url时，我的组件无法呈现，当我手动更新url时，它可以工作，但是我使用的链接却不起作用？

我在下面包括了我的链接组件，显示栏应显示为导航（因此在每条路线上），但是Newcase组件应仅在其指定的路线上显示。我已经试过使用确切的道具了。

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

export default class DisplayBar extends Component {
    render() {
        return (

            <div>
             <Router>
                <Link to="/">home</Link>
                <Link to="/form">form</Link>
            </Router>
            </div>
        )
    }
}

这是我的主app.js中的路由器

render(){
    return (

      <Router>

        <Route path = '/' component ={DisplayBar} />
        <switch>
          <Route exact path='/form' component = {NewCase} />
        </switch> 

      </Router>
    );
  }

Answer 1

您不需要使用路由器包装链接，只需删除Router

                <Link to="/">home</Link>
                <Link to="/form">form</Link>

并将<Route path = '/' component ={DisplayBar} />放在开关内

<switch>
  <Route path = '/' component ={DisplayBar} />
  <Route exact path='/form' component = {UserAdd} />
</switch>

反应路由器未在URL更新上显示组件

1 个答案: