Question

有两个＆＃34; main＆＃34;使用react-router（V4）的方法;第一种方法是使用哈希路由器，您可以通过在浏览器的地址栏上输入来直接访问地址，但是您必须添加＃到URL，另一种方法是使用BrowserRouter，它具有漂亮且用户友好的URL结构但是你不能直接输入地址来渲染路线。那么，我如何配置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'));

[在此类型中，它与#mark一起使用。例如：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'));

[在这种情况下，如果没有＃标记，它可以很好地工作，但是无法直接在浏览器的地址栏中加载它。]

Answer 1

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

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

通过在react-router中的地址栏上键入地址，直接访问路由器

1 个答案: