Question

目前我正在使用BrowserHistory进行React中的路由，我需要为它运行nodejs服务器，我不想这样做。有没有使用BrowserHistory的替代品，我听说过HashHistory，有没有人能给我一些hashHIstory的例子和它们之间有什么区别。

对我来说，我不在乎网址是否看起来很难看，我只是不想只为路由运行服务器。

我目前的代码如下：

import React from "react";
import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom';
import Main from './components/main/main.component';
import SecondView from './components/secondview/secondview.component';
import ThirdView from './components/thirdview/thirdview.component';
import Traineeship from './components/traineeship/traineeships.component';
import InformationFilter from "./components/information/information-filter.component";

const AppRoutes = () => (
    <BrowserRouter>
        <Switch>
            <Route exact path='/' component={Main}/>
            <Route path='/secondview' component={SecondView}/>
            <Route path='/traineeships' component={Traineeship}/>
            <Route path='/information-filter' component={InformationFilter}/>
            <Route path='/thirdview/:number?' component={ThirdView}/>
            <Redirect from='*' to='/' />
        </Switch>
    </BrowserRouter>

);

export default AppRoutes;

Answer 1

您可以使用Hash-bang模式，使用HashRouter

所以，在您的情况下，我认为您只需要将BrowserRouter替换为HashRouter

import React from "react";
import {HashRouter, Route, Switch, Redirect} from 'react-router-dom';
import Main from './components/main/main.component';
import SecondView from './components/secondview/secondview.component';
import ThirdView from './components/thirdview/thirdview.component';
import Traineeship from './components/traineeship/traineeships.component';
import InformationFilter from "./components/information/information-filter.component";

const AppRoutes = () => (
    <HashRouter>
        <Switch>
            <Route exact path='/' component={Main}/>
            <Route path='/secondview' component={SecondView}/>
            <Route path='/traineeships' component={Traineeship}/>
            <Route path='/information-filter' component={InformationFilter}/>
            <Route path='/thirdview/:number?' component={ThirdView}/>
            <Redirect from='*' to='/' />
        </Switch>
    </HashRouter>

);

export default AppRoutes;

是否有可能在没有服务器运行的情况下使用React Routes

1 个答案: