10

使用 react-router (V4) 有两种“主要”方式；第一种方法是使用哈希路由器，您可以通过在浏览器的地址栏上键入地址直接访问该地址，但您必须在 URL 中添加 #，另一种方法是使用 BrowserRouter，它具有漂亮且用户友好的 URL 结构，但您可以t 直接键入地址以呈现路线。

我如何配置 HashRouter 以在没有 # 的情况下工作或配置 BrowserRouter 以直接使用 URL 输入？.htaccess 可以吗？如何？

const React = require('react');
const ReactDOM = require('react-dom');
import { HashRouter as Router, Route, Link} from 'react-router-dom';
    
const routes = (
    <Router forceRefresh={false}>
        <div>
            <Route exact path="/" component={Firstpage}/>
            <Route exact path="/projects" component={Projectslist}/>
        </div>
    </Router>
);

ReactDOM.render(routes, document.getElementById('app'));

[在这种类型中，它与 # 标记一起使用。例如： localhost:2000/#/projects ]

另一种类型：

const React = require('react');
const ReactDOM = require('react-dom');
import { BrowserRouter as Router, Route, Link} from 'react-router-dom';
    
const routes = (
    <Router forceRefresh={true}>
        <div>
            <Route exact path="/" component={Firstpage}/>
            <Route exact path="/projects" component={Projectslist}/>
        </div>
    </Router>
);
    
ReactDOM.render(routes, document.getElementById('app'));

[并且在这种类型中它没有#标记也可以很好地工作，但是无法直接在浏览器的地址栏上加载它。]

4

1 回答 1

4

如果您使用的是 webpack-dev-server，则需要historyApiFallback: true在配置文件中进行设置。

https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback

于 2017-04-04T08:51:30.303 回答