时间戳

首页 > 解决方案 > 反应设置路线

reactjs - 反应设置路线

问题描述

刚开始使用 React，想为我的应用定义路由。我了解 react 如何定义路由的一般概念，但我基本上编写并且不太了解的脚本与 youtube 上关于路由器的示例略有不同。谁能帮我？

应用程序.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'));

标签： reactjsreact-router

解决方案

您需要阅读文档：文档

但首先让我向您展示一个简单的用法：

首先用组件包装你的代码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始终。Dashboard只有当您在带有/dashboardurl的页面上时，它才会呈现组件。

推荐阅读