Question

刚开始使用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'));

Answer 1

您需要阅读文档：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。而且只有当您在网址中带有Dashboard的页面上时，它才会呈现/dashboard组件。

反应设定路线

1 个答案: