时间戳

首页 > 解决方案 > 当在 React 中使用路由并路由无状态函数时，没有渲染

javascript - 当在 React 中使用路由并路由无状态函数时，没有渲染

问题描述

这是代码

当我尝试在 localhost:3000/a 路由时，什么都没有出现

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import Route from "react-router/Route";
//import Home from "./components/Home";
const Home = () => {
  return (
    <div>
      <h6>East or West home is The best </h6>
    </div>
  );
};
class App extends Component {
  state = {};
  render() {
    return (
      <Router>
        <div className="app">
          <Route path="/a" Component={Home} />
        </div>
      </Router>
    );
  }
}

export default App;
ReactDOM.render(<App />, document.getElementById("root"));

标签： javascriptreactjsroutesreact-router

解决方案

使用 Route 而不是 Router 并将您的应用程序包装在 Router 下，如下所示

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


const Home = () => {
  return (
    <div>
      <h6>East or West home is The best </h6>
    </div>
  );
};
class App extends Component {
  state = {};
  render() {
    return (
      <div className="app">
          <Route>
             <Route path="/a" Component={Home} 
          />
      </div>
    );
  }
}

export default App;
ReactDOM.render(<Router><App /></Router>, document.getElementById("root"));

推荐阅读