React-router-dom仅在刷新页面后才渲染链接的组件

问题描述 投票:0回答:1

我的React版本是:16.13.1,而我的React-router-dom版本是:5.1.2。

仅在刷新页面时才更新组件,只有链接会更改,但组件不会呈现。

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import Todo from "./components/Todo/Todo";
import About from "./components/About/About";

const Routes = () => (
    <Router>
        <Switch>
            <Route exact path='/' component={Todo}/>
            <Route path="/about" component={About}/>
        </Switch>
    </Router>
);

export default Routes;

链接代码以更改路线:

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

const Menu = () => {
    return (
        <nav className="navbar navbar-inverse bg-inverse">
            <div className="container">
                <div className="navbar-header">
                <Router>
                    <Link to="/" className="navbar-brand">
                        <i className="fa fa-calendar-check-o"></i> TodoApp
                    </Link>
                </Router>
                </div>
                <div id="navbar" className="navbar-collapse collapse">
                    <ul className="nav navbar-nav">
                        <Router>
                            <li><Link to="/todos">Tarefas</Link></li>
                            <li><Link to="/about">Sobre</Link></li>
                        </Router>
                    </ul>
                </div>
            </div>
        </nav>
    );
}
export default Menu;
javascript reactjs react-router react-router-dom
1个回答
0
投票

我将路线和菜单放在顶层路由器上确实起作用。

© www.soinside.com 2019 - 2024. All rights reserved.