React.js中使用router-link无法渲染Invoice组件求助

Hey there, let's figure out why your Invoice component isn't rendering when using RouterLink. I spotted a few key issues in your code—let's go through them one by one:

1. Multiple Router instances are causing context conflicts #

Your app has two separate Router components—one in App.js and another in Navigation.js. React Router only needs a single top-level Router to manage the entire app's routing context. Having multiple will break the link-to-route connection entirely.

Fix: Remove the Router from Navigation.js entirely. Only keep the Router in App.js as the root wrapper for your app.

2. Case mismatch between link path and route path #

Your Link uses to={"/Invoice"} (capital "I"), but your Route in App.js uses path="/invoice" (lowercase "i"). React Router paths are case-sensitive, so these won't match up.

Fix: Make them consistent—use either all lowercase or keep the capitalization the same everywhere. I'd recommend lowercase for standard practice:

• Update the Link to to="/invoice"
• Keep the Route path as path="/invoice" (or adjust both to use capital "I" if you prefer—just make sure they match)

3. Misplaced Route in Navigation component #

You've added the Route for Invoice inside the Navigation's nav structure. This is unnecessary and can cause rendering issues. All routes should be placed at the top level (inside the root Router in App.js) so they can render correctly when the path matches.

Fix: Remove the <Route exact path="/Invoice" component={Invoice} /> line from Navigation.js—your existing Route in App.js is enough to handle rendering the Invoice component.

4. Invalid HTML structure in NavDropdown #

You have a <li> nested inside an <a> tag:

<a className="dropdown-item" >
  <li><Link to={"/Invoice"} >Mexico Invoice</Link></li>
</a>

This is invalid HTML and can cause unexpected behavior. <li> should be a direct child of <ul> or <ol>, not inside an anchor tag.

Fix: Restructure this to be valid—either remove the <li> or adjust the hierarchy to follow proper HTML rules:

<li className="dropdown-item">
  <Link to="/invoice">Mexico Invoice</Link>
</li>

(You can also check the NavDropdown component's documentation to confirm the recommended way to add links inside it.)

Modified Code Snippets #

Here's how your files should look after applying these fixes:

Navigation.js

class Navigation extends Component { 
  render() { 
    return ( 
      <nav className="navbar navbar-expand-lg navbar-light bg-light"> 
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
          <span className="navbar-toggler-icon"></span> 
        </button> 
        <div className="collapse navbar-collapse" id="navbarSupportedContent"> 
          <ul className="navbar-nav mr-auto"> 
            <NavDropdown name="Test"> 
              <li className="dropdown-item">
                <Link to="/invoice">Mexico Invoice</Link>
              </li>
            </NavDropdown> 
            <NavDropdown name="Analysis"> 
              <li className="dropdown-item">
                <Link to="/Transaction">Audit Log</Link>
              </li>
            </NavDropdown> 
          </ul> 
        </div> 
      </nav> 
    ); 
  } 
} 
export default withRouter(Navigation)

App.js

class App extends Component { 
  constructor(props) { 
    super(props); 
  } 
  render() { 
    return ( 
      <Router> 
        <div > 
          <HeaderAmex className="App" /> 
          <div> 
            <Navigation/> 
          </div> 
          {/* Keep all routes here at the root level */}
          <Route exact path="/invoice" component={Invoice} /> 
          <Route exact path="/Transaction" component={/* Your Transaction component here */} />
        </div> 
      </Router> 
    ); 
  } 
} 
export default withRouter(App)

Final Notes #

• Double-check that you've imported all necessary components (Link, Route, Router, NavDropdown) in each file—missing imports can cause silent failures.
• After making these changes, clicking the "Mexico Invoice" link should correctly trigger the Route to render your Invoice component when navigating to /invoice.

内容的提问来源于stack exchange，提问作者kinnu