javascript - Access to router directly by typing it's address on the address bar in react-router - Stack Overflow

admin管理员组

文章数量:1414908

There is two "main" way to use react-router (V4); The first way is using hash router which you can access directly to an address by typing it on browser's address bar but you must add a # to URL, another way is using BrowserRouter which has a pretty and user-friendly URL structure but you can't directly type the address to render the route.

How I can config HashRouter to work without # or config BrowserRouter to work with directly URL typing, too? Is it possible with .htaccess? How?

---

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="/" ponent={Firstpage}/>
            <Route exact path="/projects" ponent={Projectslist}/>
        </div>
    </Router>
);

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

[In this type it works with a # mark. e.g.: localhost:2000/#/projects ]

---

Another type:

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="/" ponent={Firstpage}/>
            <Route exact path="/projects" ponent={Projectslist}/>
        </div>
    </Router>
);
    
ReactDOM.render(routes, document.getElementById('app'));

[And in this type it works well without a # mark, but it's not possible to load it directly on the browser's address bar.]

There is two "main" way to use react-router (V4); The first way is using hash router which you can access directly to an address by typing it on browser's address bar but you must add a # to URL, another way is using BrowserRouter which has a pretty and user-friendly URL structure but you can't directly type the address to render the route.

How I can config HashRouter to work without # or config BrowserRouter to work with directly URL typing, too? Is it possible with .htaccess? How?

---

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="/" ponent={Firstpage}/>
            <Route exact path="/projects" ponent={Projectslist}/>
        </div>
    </Router>
);

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

[In this type it works with a # mark. e.g.: localhost:2000/#/projects ]

---

Another type:

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="/" ponent={Firstpage}/>
            <Route exact path="/projects" ponent={Projectslist}/>
        </div>
    </Router>
);
    
ReactDOM.render(routes, document.getElementById('app'));

[And in this type it works well without a # mark, but it's not possible to load it directly on the browser's address bar.]

• javascript
• .htaccess
• reactjs
• react-router
• react-router-dom

Share Improve this question Follow edited Aug 13, 2020 at 0:07 Jason Aller 3,6522828 gold badges4141 silver badges3939 bronze badges asked Mar 24, 2017 at 14:32 fuefue 13122 silver badges66 bronze badges 8

• you can display the route by typing the url – Rei Dien Commented Mar 24, 2017 at 23:26
• it's exactly whatever I wish to do but it's not working in BrowserRouter :( – fue Commented Mar 26, 2017 at 7:34
• show me your configuration and ill try to see what i can help – Rei Dien Commented Mar 26, 2017 at 11:00
• Thanks dear Rei, So check it's code on below. – fue Commented Mar 27, 2017 at 10:33
• are you sure about the second example? or by any chance you are just sending this response to the '/' ? the second example will work perfectly fine, all you need to do is setup the server so it sends the right response on each path. – Rei Dien Commented Mar 27, 2017 at 11:10

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 4

If you are using webpack-dev-server, you need to set historyApiFallback: true in your config file.

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

本文标签：