Question

我已经使用create-nw-react-app创建了一个应用。基本上，这将创建一个使用reactjs的系统应用。

因此，我创建了一个呈现特定组件的路径“ /”。

<Route 
    exact
    path='/'
    render={() => <Home />}
/>

但是，该组件未渲染。因此，我使用window.location.href检查了 url ，这是我获得的 url ：

chrome-extension://dkmbccbbedageiokbcmfaegjedpbegcf/index.html?

使用create-nw-react-app甚至可以路由吗？

“ react-router”：“ ^ 4.3.1”，“ react-router-dom”：“ ^ 4.3.1”，

class Tool extends Component {
    render() {
        return (
            <React.Fragment>
                {window.location.href}
                <Breadcrumb>
                    <BreadcrumbItem><a href='/home'>Home</a></BreadcrumbItem>
                    <BreadcrumbItem><a href='/courses'>Courses</a></BreadcrumbItem>
                </Breadcrumb>
                <BrowserRouter>
                    <Switch>
                        <Route 
                            exact
                            path='/home'
                            component={Home}
                        />
                        <Route 
                            exact
                            path='/courses'
                            component={CourseList}
                        />
                    </Switch>
                </BrowserRouter>
            </React.Fragment>
        )
    }
}

开始时仅呈现Breadcrumb。然后，单击任何这些链接将在输出中输出“未找到您的文件” 。

Answer 1

使用create-nw-react-app可以进行路由吗？

路由不依赖于此项目的配置，而是依赖于React-Router库的使用以及库的正确配置和设置。基本上，您可以将React-Router添加到任何React项目中，包括React Native。

如果您使用服务器来处理应用程序的请求（例如在MERN堆栈中）或使用节点/表达服务器，则必须设置一些其他设置和配置（在服务器中）以正确处理路由。既然不是这种情况，我将继续介绍客户端情况。

交换组件的渲染

不要使用Route中的render功能，而要使用component属性来设置要在Route中渲染的组件。

看看this question in SO。

使用这样的路线：

<Route exact path="/" component={Home} />

这是路由的基本用例，也是路由最简单的情况。

交换机路由

如果要使用多个路由，请考虑在BrowserRouter内部使用Switch。

来自the docs：

<Switch>

呈现与之匹配的第一个子项<Route>或<Redirect>   位置。

这与仅使用一堆<Route>有什么不同？

<Switch>的独特之处在于它专门呈现一条路由。在   相反，与位置匹配的每个<Route>都会进行包含性渲染。

因此，如果您有多条路线，则可以使用Switch，例如：

import React, {Component} from 'react'
import {
    BrowserRouter,
    Route,
    Switch
} from 'react-router-dom'
import Home from './Home'

class Tool extends Component {
    render() {
        return (
            <React.Fragment>
                <BrowserRouter>
                    <React.Fragment>
                        <Switch>
                            <Route exact path="/" component={Home}/>
                            <Route path="/about" component={About}/>
                            <Route path="/:user" component={User}/>
                            <Route component={NoMatch}/>
                        </Switch>
                    </React.Fragment>
                </BrowserRouter>
            </React.Fragment>
        )
    }
}

一些教程和示例：

看看这些：

BrowserRouter无法在create-nw-react-app

1 个答案: