Question

我之前有过这个工作，但是我的应用程序结构发生了一些变化，这些变化打破了路线。如果我在浏览器中手动转到该路由，则可以正常工作（加载正确的内容）。 href属性未在html中呈现。

我的控制台中有一条警告消息：警告：道具类型失败：提供给to的道具Link无效。

我不明白为什么它无效。我该怎么做才能改进代码并修复问题？

Index.jsx

＆＃13;

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './Header';
import Routes from './Routes';

import '../less/imports.less';

const App = () => (
  <div>
    <Header />
    <main>
      <Routes />
    </main>
  </div>
);

if (typeof window !== 'undefined') {
  ReactDOM.render(
    (
      <App />
    ), document.getElementById('app'),
  );
}

＆＃13;

Routes.jsx：

＆＃13;

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Dashboard from './Dashboard';
import About from './About';
import Blog from './Blog';

class Routes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: 'active',
    };
  }
  render() {
    return (
      <Router>
        <div>
          <nav>
            <ul className="block-group">
              <li className={this.state.active}><Link to={Dashboard}>Dashboard</Link></li>
              <li><Link to={About}>About</Link></li>
              <li><Link to={Blog}>Blog</Link></li>
            </ul>
          </nav>
          <Route exact path="/" component={Dashboard} />
          <Route path="/about" component={About} />
          <Route path="/blog" component={Blog} />
        </div>
      </Router>
    );
  }
}

export default Routes;

＆＃13;

Answer 1

我刚刚通过将href更改为实际路径字符串来解决此问题。不确定它以前是如何工作的。

<li className={this.state.active}><Link to="/">Dashboard</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/blog">Blog</Link></li>

React Router无法正确呈现

1 个答案: