/#/রিঅ্যাক্ট-রাউটার ব্যবহার করার সময় ব্রাউজারের ঠিকানা বারে প্রদর্শিত হওয়া থেকে রোধ করার কোনও উপায় ? এটি রিএ্যাকটিজেএস এর সাথে। অর্থাৎ কোনও নতুন রুটে যেতে লিংকে ক্লিক করা localhost:3000/#/বা
localhost:3000/#/about। রুট উপর নির্ভর করে।
/#/রিঅ্যাক্ট-রাউটার ব্যবহার করার সময় ব্রাউজারের ঠিকানা বারে প্রদর্শিত হওয়া থেকে রোধ করার কোনও উপায় ? এটি রিএ্যাকটিজেএস এর সাথে। অর্থাৎ কোনও নতুন রুটে যেতে লিংকে ক্লিক করা localhost:3000/#/বা
localhost:3000/#/about। রুট উপর নির্ভর করে।
উত্তর:
প্রতিক্রিয়া-রাউটারের 1, 2 এবং 3 সংস্করণগুলির জন্য, ইউআরএল ম্যাপিং স্কিমটিতে রুটটি সেট করার সঠিক উপায়টি হ'ল ইতিহাসের বাস্তবায়নের historyপ্যারামিটারে পেরিয়ে যাওয়া <Router>। থেকে ইতিহাস ডকুমেন্টেশন :
সংক্ষেপে, একটি ইতিহাস কীভাবে পরিবর্তনের জন্য ব্রাউজারের ঠিকানা দণ্ডটি শুনতে হয় তা জানতে এবং URL কে একটি লোকেশন অবজেক্টে পার্স করে যা রাউটারটি রুটের সাথে মেলে এবং উপাদানগুলির সঠিক সেট রেন্ডার করতে পারে।
প্রতিক্রিয়া-রাউটার 2 এবং 3 এ, আপনার রুট কনফিগারেশন কোডটি এর মতো দেখতে পাবেন:
import { browserHistory } from 'react-router'
ReactDOM.render ((
<Router history={browserHistory} >
...
</Router>
), document.body);সংস্করণ 1.x এ, আপনি পরিবর্তে নিম্নলিখিতটি ব্যবহার করবেন:
import createBrowserHistory from 'history/lib/createBrowserHistory'
ReactDOM.render ((
<Router history={createBrowserHistory()} >
...
</Router>
), document.body);উত্স: সংস্করণ 2.0 আপগ্রেড গাইড
প্রতিক্রিয়া-রাউটারের আসন্ন সংস্করণ 4 এর জন্য সিনট্যাক্সটি দুর্দান্ত পরিবর্তন করেছে এবং BrowserRouterরাউটারের রুট ট্যাগ হিসাবে এটি ব্যবহার করা দরকার ।
import BrowserRouter from 'react-router/BrowserRouter'
ReactDOM.render ((
<BrowserRouter>
...
<BrowserRouter>
), document.body);historyএটি একটি একা একা প্যাকেজ যা আপনার ইনস্টল করতে হবে।
browserHistoryv2.x মধ্যে: import { browserHistory } from 'react-router' <Router history={browserHistory} />চেক প্রতিক্রিয়া-রাউটার আপগ্রেড নির্দেশিকা
hashHistory, এই কোয়েরি পরমকে শেষে কীভাবে মুক্তি পাওয়ার কোনও উপায় আছে? http://localhost:8080/#/dashboard?_k=yqwtyu
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});বর্তমান সংস্করণ 0.11 এবং ফরোয়ার্ডের Router.HistoryLocationজন্য আপনাকে যুক্ত করতে হবে Router.run()। <Routes>এখন অবচয় করা হয়েছে। 0.12.x ইতিহাস অবস্থান বাস্তবায়নের জন্য আপগ্রেড গাইড দেখুন ।
আপনার যদি IE8 সমর্থন করার প্রয়োজন না হয় তবে আপনি ব্রাউজারের ইতিহাস ব্যবহার করতে পারেন এবং window.pushStateহ্যাশ সেট করার পরিবর্তে প্রতিক্রিয়া-রাউটার ব্যবহার করবে ।
কীভাবে এটি করা যায় তা আপনি ব্যবহার করছেন প্রতিক্রিয়া রাউটারের সংস্করণের উপর নির্ভর করে:
<Routes location="history">এটি যুক্ত করে রেখেছি এটি ঠিক আছে, যতক্ষণ না আপনি রুটে চলাকালীন ব্রাউজারটি রিফ্রেশ করুন localhost:3000/aboutthen সুতরাং আমি একটি 404 ত্রুটি পাই get এটা কি প্রত্যাশিত, আমি ব্যবহার করছি python -m SimpleHTTPServer 3000?
/aboutআপনার মূল পৃষ্ঠাটি লোড করে /। অন্যথায় আপনার সার্ভারটি এমন কোনও রুটের /aboutসন্ধানের চেষ্টা করছে যা মেলে এবং কিছুই খুঁজে পায় না (404)। আমি ব্যক্তিগতভাবে পাইথন ব্যবহার করবেন না কিন্তু আপনি সাধারণত, হয় একটি ম্যানুয়াল রুট খুঁজে /*অথবা /.*-> /কাজ করে - বা এটি কিছু বলা হতে পারে html5Modeআপনার সার্ভার সেটিংস URL গুলি।
এটি বাস্তবায়নের জন্য আপনি .htaccess ব্যবহার করতে পারেন। ব্রাউজারে সাধারণত ক্যোরি স্ট্রিং ডিলিমিটারের প্রয়োজন হয় ?বা #কোয়েরি স্ট্রিংটি শুরু হয় এবং ডিরেক্টরিগুলির পথগুলি শেষ হয় তা নির্ধারণ করতে। আমরা যে www.mysite.com/dir
পরিণতিটি চাই তা হ'ল তাই ওয়েব সার্ভার এটি যে ডিরেক্টরিটি বলেছিল তার জন্য অনুসন্ধান করার আগে ওয়েব সার্ভারটি অনুসন্ধান করার আগে আমাদের সমস্যাটি ধরা উচিত /dir। সুতরাং আমরা .htaccessপ্রকল্পের মূলের মধ্যে একটি ফাইল রাখি ।
# Setting up apache options
AddDefaultCharset utf-8
Options +FollowSymlinks -MultiViews -Indexes
RewriteEngine on
# Setting up apache options (Godaddy specific)
#DirectoryIndex index.php
#RewriteBase /
# Defining the rewrite rules
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^.*$ ./index.htmlতারপরে আপনি উইন্ডো.লোকেশন.পথনাম সহ ক্যোয়ারী প্যারামিটারগুলি পান
তারপরে আপনি চাইলে প্রতিক্রিয়া রুটগুলি ব্যবহার এড়াতে পারেন এবং আপনিও চাইলে কেবল ইউআরএল এবং ব্রাউজারের ইতিহাসটি ম্যানিপুলেট করতে পারেন। আশা করি এটি কাউকে সহায়তা করবে ...
ইতিহাস প্যাকেজ ইনস্টল করুন
npm install history --saveপরবর্তী আমদানি তৈরি করুন ইতিহাস এবং ব্যবহারের নাম ইতিহাস থেকে
import { createHistory, useBasename } from 'history';
...
const history = useBasename(createHistory)({
basename: '/root'
});আপনার অ্যাপ্লিকেশন url যদি www.example.com/myApp হয় তবে / রুটটি / myApp হওয়া উচিত।
রাউটারে ইতিহাসের পরিবর্তনশীলটি পাস করুন
render((
<Router history={history}>
...
</Router>
), document.getElementById('example'));এখন আপনার সমস্ত লিঙ্ক ট্যাগের জন্য সমস্ত পথের সামনে একটি "/" যুক্ত করুন।
<Link to="/somewhere">somewhere</Link>সমাধানটির অনুপ্রেরণা প্রতিক্রিয়া-রাউটার উদাহরণ থেকে এসেছে যা দুর্ভাগ্যক্রমে, তাদের এপিআইতে সঠিকভাবে নথিভুক্ত হয়নি।
হ্যাশের পরে কী প্রদর্শিত হবে তা হ্যান্ডেল করার আরেকটি উপায় (সুতরাং যদি আপনি পুশস্টেট ব্যবহার না করেন!) আপনার কাস্টমলোকেশন তৈরি করা এবং এটি রিঅ্যাক্টরউটার তৈরিতে লোড করা।
উদাহরণস্বরূপ, যদি আপনি ক্রলিংয়ের জন্য গুগল স্প্যাকগুলি মেনে চলার জন্য হ্যাশবাং ইউআরএল (# এর সাথে #) করতে চান তবে আপনি একটি হ্যাশব্যাংলোকেশন.জেএস ফাইল তৈরি করতে পারেন যা মূলত আসল হ্যাশলোকেশন অনুলিপি করে:
'use strict';
var LocationActions = require('../../node_modules/react-router/lib/actions/LocationActions');
var History = require('../../node_modules/react-router/lib/History');
var _listeners = [];
var _isListening = false;
var _actionType;
function notifyChange(type) {
if (type === LocationActions.PUSH) History.length += 1;
var change = {
path: HashbangLocation.getCurrentPath(),
type: type
};
_listeners.forEach(function (listener) {
listener.call(HashbangLocation, change);
});
}
function slashToHashbang(path) {
return "!" + path.replace(/^\//, '');
}
function ensureSlash() {
var path = HashbangLocation.getCurrentPath();
if (path.charAt(0) === '/') {
return true;
}HashbangLocation.replace('/' + path);
return false;
}
function onHashChange() {
if (ensureSlash()) {
// If we don't have an _actionType then all we know is the hash
// changed. It was probably caused by the user clicking the Back
// button, but may have also been the Forward button or manual
// manipulation. So just guess 'pop'.
var curActionType = _actionType;
_actionType = null;
notifyChange(curActionType || LocationActions.POP);
}
}
/**
* A Location that uses `window.location.hash`.
*/
var HashbangLocation = {
addChangeListener: function addChangeListener(listener) {
_listeners.push(listener);
// Do this BEFORE listening for hashchange.
ensureSlash();
if (!_isListening) {
if (window.addEventListener) {
window.addEventListener('hashchange', onHashChange, false);
} else {
window.attachEvent('onhashchange', onHashChange);
}
_isListening = true;
}
},
removeChangeListener: function removeChangeListener(listener) {
_listeners = _listeners.filter(function (l) {
return l !== listener;
});
if (_listeners.length === 0) {
if (window.removeEventListener) {
window.removeEventListener('hashchange', onHashChange, false);
} else {
window.removeEvent('onhashchange', onHashChange);
}
_isListening = false;
}
},
push: function push(path) {
_actionType = LocationActions.PUSH;
window.location.hash = slashToHashbang(path);
},
replace: function replace(path) {
_actionType = LocationActions.REPLACE;
window.location.replace(window.location.pathname + window.location.search + '#' + slashToHashbang(path));
},
pop: function pop() {
_actionType = LocationActions.POP;
History.back();
},
getCurrentPath: function getCurrentPath() {
return decodeURI(
// We can't use window.location.hash here because it's not
// consistent across browsers - Firefox will pre-decode it!
"/" + (window.location.href.split('#!')[1] || ''));
},
toString: function toString() {
return '<HashbangLocation>';
}
};
module.exports = HashbangLocation;স্ল্যাশটো হ্যাশবাং ফাংশনটি নোট করুন ।
তারপরে আপনাকে ঠিক করতে হবে
ReactRouter.create({location: HashbangLocation})এবং এটাই :-)
HashHistoryআইসো ব্যবহারের কারণেBrowserHistory। এই বিষয়ে এই প্রশ্নটিও দেখুন যেখানে আমি এই বিষয়ে অনেক পটভূমি তথ্য দিই।