![](/img/trans.png)
[英]React-router-dom not rendering components (express,react,redux,mongodb)
[英]React-router-dom not rendering any components
我在遵循其路线后无法渲染组件时遇到了一些麻烦。 我使用create-react-app。
我的index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
serviceWorker.unregister();
和App.js
import React, { Component } from "react";
import "./App.css";
import { Route, Switch } from "react-router-dom";
import test from "./Component/test1/test";
const Home = () => <h1>Heloo</h1>;
class App extends Component {
render() {
return (
<div className="App">
<Switch>
<Route path="/Log" render={() => <h1>Log</h1>} />
<Route path="/About" Component={Home} />
<Route path="/" Component={test} />
</Switch>
</div>
);
}
}
export default App;
当我运行项目时, /Log
呈现良好,但是/About
和/
显示以下html:
<div id="root">
<div class="App">
</div>
</div>
您需要包括房屋和测试组件的进口!
//import Home from './Component/test1/home' (or whatever the path is for home);
//import test from './Component/test1/test' (or whatever the path is for test);
另外,如果希望您的主页成为用户看到的第一件事,则可能需要将其包装在自己的开关中,然后提供允许查找其他路径的渲染器。
<Switch>
<Route exact path="/" component={home} />
</Switch>
<Route
path="/(.+)"
render={() => (
<div>
<Switch>
<Route path="/home" component={Home} />
<Route path="/test" component={test} />
</Switch>
</div>
)}
/>
希望这可以帮助! :)
更改为此:
import React, { Component } from 'react';
import './App.css';
import { Route, Switch } from 'react-router-dom';
import Test from './components/Test';
const Home = () => <h1>Heloo</h1>;
class App extends Component {
render() {
return (
<div className="App">
<Switch>
<Route exact path="/" component={Test} />
<Route path="/log" render={() => <h1>Log</h1>} />
<Route path="/about" component={Home} />
</Switch>
</div>
);
}
}
export default App;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.