<BrowserRouter>不会从路由中删除hashbang

时间:2019-07-26 05:50:07

标签: javascript reactjs react-router-dom

我的反应路线中有一个#/(哈希)...

使用新的<Route>搜索覆盖<BrowserRouter>的在线网站将解决此问题

import React, { Component } from 'react';
import './App.scss';

import { observer } from 'mobx-react';
import { Header } from './components/Header'
import { Footer } from './components/Footer';
import { Route , BrowserRouter , Switch } from 'react-router-dom';
import MainState from './components/appset/MainState';

import HomePage from './components/HomePage';
import { TestContent } from './components/TestContent';
import { Account } from './components/Account';
import { TokenList } from './components/TokenList';
import { TokenPage } from './components/TokenPage';
import ErrorPage from './components/ErrorPage';


class Layout extends Component {

  render() {
    return (
      <div id="bodyWheel" className={`App ${MainState.currentTheme} ${MainState.currentLang}`}>
        <Header />

        <div id="App-intro" className={this.state.resolutionHeight}>
          <div className="container">
            <div className="layout-main">
              <BrowserRouter>
                <Route path="/" exact component={HomePage} />
                <Route path="/test" component={TestContent} />
                <Route path="/account/:id" exact component={Account} />
                <Route path="/token" exact component={TokenPage} />
                <Route path="/token/:id" exact component={TokenList} />
                <Route path="/operation/:id" exact component={HomePage}/>
                <Route path="/error/:id" exact component={ErrorPage} />
              </BrowserRouter>
            </div>
          </div>
        </div>

        <Footer />
      </div>
    );
  }
}

export default Layout;

例如,它在每条路线的末尾都单独添加#/:

www.foo.com/account/tera 变成 www.foo.come/account/tera#/

<BrowserRouter>什么也没做。

是否可以构建并上传到网络服务器而不是在“ npm start”上运行来解决此问题?

(edit :)证明<BrowserRouter> works but something just keeps adding#/ to the end of my routes the routs without#/`效果很好

1 个答案:

答案 0 :(得分:0)

修复程序位于<BrowserRouter>中,编辑为<BrowserRouter basename="">

并涵盖主要部门

<BrowserRouter basename="">
   <div id="bodyWheel" className={`App ${MainState.currentTheme} ${MainState.currentLang}`}>
   ....
   </div>
</BrowserRouter>

解决了所有路由问题!