React设置路由
React设置路由
提问于 2019-07-30 20:24:33
刚开始使用React，想要为我的应用程序定义路由。我理解react如何定义路由的一般概念，但我写的脚本基本上不太理解，与youtube上关于路由器的示例略有不同。有谁可以帮我？
App.js
import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";
import Header from "./layout/Header";
import Dashboard from "./users/Dashboard";
import Users from "./users/Users";
import { Provider } from 'react-redux';
import store from '../store';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
class App extends Component {
render() {
return (
<Provider store={store}>
<Fragment>
<Header />
<div className="container">
<Dashboard />
</div>
</Fragment>
</Provider>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));回答 1
Stack Overflow用户
发布于 2019-07-30 20:40:41
您需要阅读文档：Documentation
但在开始之前，让我向您展示一个简单的用法：
首先用Router组件包装你的代码：
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<Fragment>
<Header />
<div className="container">
<Dashboard />
</div>
</Fragment>
</Router>
</Provider>
);
}
}然后，您可以指定当到达某个特定的url时必须显示哪个组件。如下所示：
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<Fragment>
<div className="container">
<Route path="/dashboard" component={Dashboard} />
</div>
</Fragment>
</Router>
</Provider>
);
}
}使用上面的代码将始终呈现Header。只有当你在url中包含/dashboard的页面上时，它才会呈现Dashboard组件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57271637
复制相关文章
相似问题
腾讯云开发者
