Реакция подсветки кода уценки не работает после изменения маршрута - PullRequest
Новая
       23

Реакция подсветки кода уценки не работает после изменения маршрута

0 голосов
/ 18 октября 2019

Я использую библиотеку react-markdown и prismjs для выделения кода в моем проекте. Но подсветка не всегда работает после изменения маршрута.

Например,

  • У меня есть код уценки в TestPage, а URL-путь в браузере равен localhost:3000/test,
const markdown = `## How about some code?
\`\`\`js
var React = require('react');
var Markdown = require('react-markdown');
React.render(
  <Markdown source="# Your markdown here" />,
  document.getElementById('content')
);
\`\`\``;
  • Если я запускаю проект, по умолчанию отображается страница рендеринга localhost:3000, когда я прыгаю на маршрут localhost:3000/test, синтаксис уценки работает, но подсветка кода нене работаетРендеринг HTML-кода выглядит следующим образом: 
<h2>How about some code?</h2>
<pre>
  <code class="language-js">
    var React = require('react');
    var Markdown = require('react-markdown');
    React.render(
      &lt;Markdown source="# Your markdown here" /&gt;,
      document.getElementById('content')
    );
  • Если я обновлю страницу с помощью URL localhost:3000/test, подсветка будет работать. Рендеринг HTML-кода выглядит следующим образом: 
<pre class="  language-js">
  <code class="  language-js">
  <span class="token keyword">var</span> React 
  <span class="token operator">=</span> 
  <span class="token function">require</span>
  <!-- For simplify, I omit the left code -->
  • Но если я перехожу на другую страницу и обратно на testpage, подсветка кода не работаетснова.

Почему это происходит? Я хочу знать, в чем проблема моей логики кода.

Код ниже показывает, как я использую react-markdown: 

<ReactMarkdown source={markdown} renderers={{ CodeBlock }} />

CodeBlock: 

export default function CodeBlock({ language, value }) {
  const codeEle = useRef(null);

  useEffect(() => {
    console.log('CodeBlock: useEffect');
    Prism.highlightElement(codeEle, false);
  }, [codeEle]);

  return (
    <pre>
      <code ref={codeEle} className={`language-${language}`}>
        {value}
);}

PS

  • Я использую react-router-dom, есть Switch в приложении / index.js 
<Switch>
  <Route exact path="/" component={HomePage} />
  <Route path="/test" component={TestPage} />
</Switch>
...