Question

我正在尝试设置一个反应路由器的基本示例，其中我在模板设置下有两个简单的路由，问候和注册。目前，我没有收到任何加载错误，但是，当尝试通过在地址栏中键入来访问/signup路由时，我收到以下错误：Cannot GET /signup我遇到了问题了解原因。

是否有其他人使用react-router-dom v4遇到此问题？我感谢任何有关如何解决此问题的建议，并允许通过URL成功导航到不同的路径。

注意，如果我尝试使用内置的反应链接组件并单击链接来访问这些URL路径，它会按预期工作，但是当在网址刷新页面时，我再次收到Cannot GET signup错误。

app.js

import React from "react";
import NavigationBar from '../components/navigation-bar';

export class App extends React.Component {
    render() {
        return (
            <div className="container">
                <NavigationBar />
                {this.props.children}
            </div>
        );
    }
}

index.js

import React from 'react';
import ReactDOM from "react-dom";
import {Provider} from "react-redux";
import {createStore} from "redux";
import allReducers from "./reducers";

import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import {App} from "./components/app";
import {Greetings} from "./components/greetings";
import {Signup} from "./components/signup";


const store = createStore(allReducers);

ReactDOM.render(
                <Provider store={store}>
                    <Router>
                        <App>
                            <Switch>
                                <Route exact path="/" component={Greetings} />
                                <Route path="/signup" component={Signup} />
                            </Switch>
                        </App>
                    </Router>

                </Provider>, window.document.getElementById("app"));

greetings.js

import React from "react";

export class Greetings extends React.Component {
    render() {
        return (
            <h2>
                Greetings
            </h2>
        );
    }
}

signup.js

import React from "react";

    export class Signup extends React.Component {
        render() {
            return (
                <h2>
                    SIGN UP
                </h2>
            );
        }
    }

Answer 1

尝试使用HashRouter而不是BrowserRouter，因为使用BrowserRouter网络服务器必须准备好处理真实的网址。

import {HashRouter as Router, Route, Switch} from "react-router-dom";

基本路由器模板示例 - 无网址访问

1 个答案: